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

Question

目前我有一个页面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>

效果如下

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

Answer 1

在表格的每个单元格中添加一个唯一的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>