chelseaNB1 2023-03-15 09:15 采纳率: 75.7%
浏览 20
已结题

django怎么把一个html内的表格数据传给另一个html的表格内

目前我有一个页面sr_list6.html接收了后端视图函数传递过来的数据(obj) 是一个列表套字典 共601个键值对,并在表格内显示
sr_list6.html

<div class="container-fluid" style="margin-top:5px;">
    <div class="panel panel-default" style="OVERFLOW-X: scroll;">
        <table class="table table-bordered" name="table">
            <thead>
            <tr>
                <th>R400</th>
                <th>R401</th>
                <th>此处省略599个数据</th>
            </tr>
            </thead>
            <tbody id="tb">
            {% for item in obj %}
            <tr>
                <td>{{ item.r400 }}</td>
                <td>{{ item.r401 }}</td>
                <td>此处省略599个数据</td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>

效果如下

img

现在想把表格内的数据传递给另一个html页面中继续使用 请问该怎么办?有帮助必采纳!

  • 写回答

2条回答 默认 最新

  • qq_57703145 2023-03-15 09:31
    关注

    在表格的每个单元格中添加一个唯一的ID属性。对于第一行第一列的单元格,可以添加一个ID为r400-1的属性。使用JavaScript遍历表格的每个单元格,把值保存到一个JavaScript对象中。用getElementById()方法访问每个单元格的值。把JavaScript对象转换为JSON格式。将JSON数据作为查询字符串附加到要传递给另一个HTML页面的URL中。用window.location.href属性来获取当前页面的URL,用Script中的encodeURIComponent()函数对JSON数据进行编码。在另一个HTML页面中,用JavaScript解析查询字符串并将JSON数据转换回JavaScript对象。用window.location.search属性来获取查询字符串。

    <!-- sr_list6.html -->
    <div class="container-fluid" style="margin-top: 5px;">
      <div class="panel panel-default" style="overflow-x: scroll;">
        <table class="table table-bordered" id="myTable">
          <thead>
            <tr>
              <th>400</th>
              <th>R401</th>
              <th>...</th>
            </tr>
          </thead>
          <tbody>
            {% for item in obj %}
              <tr>
                <td id="r400-{{ forloop.counter }}">{{ item.r400 }}</td>
                <td id="r401-{{ forloop.counter }}">{{ item.r401 }}</td>
                <td>...</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    
    <script>
      var tableData = {};
      var tableRows = document.getElementById("myTable").rows;
      for (var i = 1; i < tableRows.length; i++) {
        var row = tableRows[i];
        var rowData = {};
        for (var j = 0; j < row.cells.length; j++) {
          var cell = row.cells[j];
          var cellId = cell.getAttribute("id");
          var cellValue = cell.innerText;
          rowData[cellId] = cellValue;
        }
        tableData["row" + i] = rowData;
      }
      var jsonData = JSON.stringify(tableData);
      var url = "new_page.html?data=" + encodeURIComponent(jsonData);
      window.location.href = url;
    </script>
    
    
    
    <!-- new_page.html -->
    <script>
      var queryString = window.location.search;
      var urlParams = new URLSearchParams(queryString);
      var jsonData = decodeURIComponent(urlParams.get("data"));
      var tableData = JSON.parse(jsonData);
      console.log(tableData);
    </script>
    
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月23日
  • 已采纳回答 3月15日
  • 创建了问题 3月15日

悬赏问题

  • ¥15 carsim与simulink联合方针模拟无控制器驾驶员驾驶效果
  • ¥25 annaconda jvpyter
  • ¥20 来一个会抓包app支付接口的
  • ¥30 vivado2017.4的sdk打不开
  • ¥50 matlab,文献复现
  • ¥20 寻找Flink CDC指导,有偿咨询
  • ¥15 cruise如何仿真不同温度下车辆的经济性?
  • ¥20 扑克牌游戏的完整代码
  • ¥88 求帮安装Python架构的vnpy
  • ¥20 逻辑回归法分析品牌知名度和购买意向