javascript - 更改 Javascript 函数以编辑单元格而不是 append 它们

Question

很抱歉我的问题含糊不清。让我从头开始。

我目前有这个:http://jsfiddle.net/kmg4x/1/

与我发布的另一个问题相关:Alternative to Jeditable for editable table cells

虽然我最终想取消顶部的表单并使单元格可编辑，但这个问题主要是关于更改表格内容而不是添加新单元格。

如您所见，如果您在左上角的输入框中输入一个字母并单击“退出”，则会将数组的剩余部分 append 到表格中(在切片之后)。我希望它更改现有单元格的内容。

我尝试将 cell.appendChild(document.createTextNode) 更改为 innerHTML 但最终做了完全相同的事情。我的猜测是，这与更改有关var tbody = document.getElementById(id).getElementsByTagName("tbody")[0]; 到 var tbody = document.getElementById(id).getElementsByTagName("td")[0 ];但是当我这样做时它就会崩溃。

是否存在与 tbody.insertRow(r) 等价的 editCell() 或许 td.innerHTML(r)？

最终我将添加一个可以添加和删除行的按钮。

希望这会更好。

Answer 1

更新:感谢您编辑问题，我看到了问题，尝试更改您的函数的代码 appendTable (然而这个名字已经不好听了；):

function appendTable(id)
 {
     var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
     var i = 0;
     var rows = tbody.rows;
     for (var r = 0; r < 4; r++) {
         var row = rows[r];
         for (var c = 0; c < 4; c++) {
             var cell = row.cells[c];
             cell.innerHTML = subset[i++];
         }
     }
 }

您的错误是您一直插入行，并向其中插入单元格。相反，您使用数组 rows的tbody元素(显然它为您提供了表格的所有行)，和 rows依次有 cells 数组- 行的所有单元格。因此，现在您可以“重用”它们来更新表格内容。

注意，这个函数使用表格，但不创建它(您的整个函数创建了表格行和单元格)。