javascript - 将表格单元格内容存储到 js 数组中

Question

我需要像这样使用 tr 和 td 索引将表格单元格内容存储到数组中:

myArray[tr_idx][td_idx]='value';

不需要存储数组中所有单元格的数据，只需存储几个具有特殊内容的单元格，但如果我使用索引作为数组的键，我将有许多空数组元素。

例如

myArray[2][3]='data1';
myArray[4][3]='data2';

alert (myArray.toSource()) -> [, , [, , , "data1"], , [, , , "data2"]]

也许有另一种合适的方式来存储这种类型的数据？

Answer 1

为什么不将它们存储为单独的 2 项数组 [row,col]？由于已经可以通过 tableElement.rows[].cells[] 访问表格单元格，因此您可以使用 2 个索引从表格中访问它们。

var storedCells = [];
// Store row 2, column 3
storedCells.push([2,3]);

访问方式:

// Table row:
storedCells[0][0]
// Table column
storedCells[0][1]

//As in :
tableElement.rows[storedCells[0][0]].cells[storedCells[0][1]].innerHTML = "New cell value!"

或者更简洁，如果你更喜欢使用对象而不是数组:

storedCells.push({row: 2, column: 3});
storedCells.push({row: 4, column: 6});

访问:

tableElement.rows[storedCells[0].row].cells[storedCells[0].column].innerHTML = "New cell value!";

最后，如果您实际上不需要行/列索引，而是 DOM 节点本身，只需将它们推送到您的数组即可。

var storedCells = [];
// Save references to some individual <td> nodes
storedCells.push(tableElement.rows[1].cells[2]);
storedCells.push(tableElement.rows[4].cells[6]);

然后对它们进行微不足道的修改:

// Set the value of the second element:
storedCells[1].innerHTML = "New content!";

评论后更新:

如果您需要能够将单元格坐标附加到来自后端的新值，一个好的解决方案是扩展上面的对象 {} 示例以包含一个 value 属性。服务器可以在 JSON 中传回新值。

storedCells.push({row: 2, column: 3, value: ""});
storedCells.push({row: 4, column: 6, value: ""});

您的后端应将 JSON 响应发送回包含相同类型对象数组的脚本，其中 value: 已填充新的单元格值。然后你可以将它传递回表中:

// Pass the value attribute received from JSON into the cell's contents
tableElement.rows[storedCells[0].row].cells[storedCells[0].column].innerHTML = storedCells[0].value;