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

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 用verilog实现tanh函数和softplus函数
  • ¥15 Hadoop集群部署启动Hadoop时碰到问题
  • ¥15 求京东批量付款能替代天诚
  • ¥15 slaris 系统断电后,重新开机后一直自动重启
  • ¥15 QTableWidget重绘程序崩溃
  • ¥15 谁能帮我看看这拒稿理由啥意思啊阿啊
  • ¥15 关于vue2中methods使用call修改this指向的问题
  • ¥15 idea自动补全键位冲突
  • ¥15 请教一下写代码,代码好难
  • ¥15 iis10中如何阻止别人网站重定向到我的网站