在点击表格行的时候,将该行的数据存储到浏览器的 sessionStorage 或 localStorage 中,然后在表单页面中从 sessionStorage 或 localStorage 中获取该行数据
时间: 2023-07-26 18:42:41 浏览: 82
好的,你的问题是如何将表格行的数据存储到浏览器的 sessionStorage 或 localStorage 中,以及如何在表单页面中从 sessionStorage 或 localStorage 中获取该行数据。
首先,你可以在表格行上绑定一个点击事件,在点击事件中获取该行的数据,并将其存储到 sessionStorage 或 localStorage 中。例如,使用 sessionStorage 存储该行数据的示例代码如下:
```javascript
// 绑定点击事件
table.addEventListener('click', function(event) {
// 获取点击的行
const row = event.target.parentNode;
// 获取行数据
const data = getRowData(row);
// 存储数据到 sessionStorage 中
sessionStorage.setItem('rowData', JSON.stringify(data));
});
// 获取行数据的函数
function getRowData(row) {
const cells = row.querySelectorAll('td');
const data = {};
for (let i = 0; i < cells.length; i++) {
const key = cells[i].getAttribute('data-key');
const value = cells[i].textContent;
data[key] = value;
}
return data;
}
```
在上面的代码中,我们使用了 sessionStorage 的 setItem 方法来存储数据。需要注意的是,我们使用了 JSON.stringify 方法将数据转换成 JSON 字符串进行存储。
接下来,在表单页面中,我们可以使用 sessionStorage.getItem 方法来获取之前存储的数据。例如,使用 sessionStorage 获取之前存储的数据并填充表单的示例代码如下:
```javascript
// 获取存储的数据
const data = JSON.parse(sessionStorage.getItem('rowData'));
// 填充表单
document.getElementById('input1').value = data.input1;
document.getElementById('input2').value = data.input2;
document.getElementById('input3').value = data.input3;
```
在上面的代码中,我们使用了 sessionStorage 的 getItem 方法来获取数据,并使用 JSON.parse 方法将 JSON 字符串转换为 JavaScript 对象。然后,我们可以使用获取到的数据来填充表单中的输入框。
阅读全文