Question

您好，我想创建一个脚本，该脚本使用找到的（tr）的数量，然后创建这三行代码，但是根据它获得的（tr）的数量更改其中的数量，这里是一个示例：

我有一行代码来计算表中的表行（按下按钮后）减去表头（th）：

var rowCount = $('#items-table tr').length - 1;

我要说的是例如我得到的数字是3，我想复制这三行代码并更改其中的变量和数字。

这是我要复制的三行代码：

table = document.getElementById("items-table");
var cell1 = table.rows[1].cells[0].innerHTML;
var cell2 = table.rows[1].cells[1].innerHTML;
var cell3 = table.rows[1].cells[2].innerHTML;

我想要更改的是var，所以我可以稍后定义它，所以如果我得到3，这就是我想要的输出：

var cell1 = table.rows[1].cells[0].innerHTML;
var cell2 = table.rows[1].cells[1].innerHTML;
var cell3 = table.rows[1].cells[2].innerHTML;

var cell4 = table.rows[2].cells[0].innerHTML;
var cell5 = table.rows[2].cells[1].innerHTML;
var cell6 = table.rows[2].cells[2].innerHTML;

var cell7 = table.rows[3].cells[0].innerHTML;
var cell8 = table.rows[3].cells[1].innerHTML;
var cell9 = table.rows[3].cells[2].innerHTML;

我将如何去做？我也想创建一个可以代表所有var单元格的变量

tableData = []   tableData.append(var cell7 = etc..)

所以我可以把tableData和：

localStorage.setItem("tableData", tableData);

所以我可以在另一个HTML文件中调用此表数据变量。我还想对变量行本身进行本地存储，以便可以分别调用它们。

localStorage.setItem("item-name-1", cell1);

我该怎么做？

重要说明：在我的html页面开始处，表为空。然后，我使用几个输入和一个添加按钮附加数据。

感谢您的任何帮助，谢谢。

Answer 1

对数组使用变量：

var table, cell, i, r, noofrows;
table = document.getElementById("items-table");
noofrows = table.rows.length;

for (i = 0, r = 0, cell = []; r < noofrows; i++, r++) {
  cell[i] = table.rows[r].cells[0].innerHTML;
  cell[i+1] = table.rows[r].cells[1].innerHTML;
  cell[i+2] = table.rows[r].cells[2].innerHTML;
}

然后，第一个单元格将被分配给变量cell[0]，第二个单元格将被分配为cell[1]，依此类推。例如，document.write(cell[0])将写“ Item”（来自您先前的问题）

document.write(cell[1])将写“大小”。

document.write(cell[3])将写入第2行的第一个单元格。

Answer 2

您正在寻找一个 array ，在您的情况下可能是一个数组数组：

let cells = Array.prototype.map.call(document.getElementById("items-table").rows, row => {
    return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
});

实时示例：

let cells = Array.prototype.map.call(document.getElementById("items-table").rows, row => {
    return Array.prototype.map.call(row.cells, cell => cell.innerHTML);
});
console.log("cells:", cells);

.as-console-wrapper {
  max-height: 100% !important;
}

<table id="items-table">
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td>Row 3 Cell 3</td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td>Row 4 Cell 3</td>
    </tr>
  </tbody>
</table>

Array.prototype.map.call部分使我们可以在Array和rows上使用cells的内置map函数，即使它们不是数组，但是是数组状的。另外，您实际上可以使用Array.from将它们转换为数组：

let cells = Array.from(document.getElementById("items-table").rows).map(row => {
    return Array.from(row.cells).map(cell => cell.innerHTML);
});

实时示例：

let cells = Array.from(document.getElementById("items-table").rows).map(row => {
    return Array.from(row.cells).map(cell => cell.innerHTML);
});
console.log("cells:", cells);

.as-console-wrapper {
  max-height: 100% !important;
}

<table id="items-table">
  <tbody>
    <tr>
      <td>Row 1 Cell 1</td>
      <td>Row 1 Cell 2</td>
      <td>Row 1 Cell 3</td>
    </tr>
    <tr>
      <td>Row 2 Cell 1</td>
      <td>Row 2 Cell 2</td>
      <td>Row 2 Cell 3</td>
    </tr>
    <tr>
      <td>Row 3 Cell 1</td>
      <td>Row 3 Cell 2</td>
      <td>Row 3 Cell 3</td>
    </tr>
    <tr>
      <td>Row 4 Cell 1</td>
      <td>Row 4 Cell 2</td>
      <td>Row 4 Cell 3</td>
    </tr>
  </tbody>
</table>

将其存储在本地存储中只是对JSON.stringify的调用：

localStorage.setItem("tableData", JSON.stringify(cells));

从本地存储还原它：

var cells = JSON.parse(localStorage.getItem("tableData") || "[]");

（|| "[]"部分为未存储tableData的情况提供默认值-空数组。）

创建长度为

2 个答案: