目前我有一个页面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>R400th>
<th>R401th>
<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页面中继续使用 请问该怎么办?有帮助必采纳!
在表格的每个单元格中添加一个唯一的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>