Question

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

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

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

如您所见，如果您在左上角的输入框中输入一个字母并单击，它会将表附加到数组的其余部分（在slice之后）。我想改为改变现有单元格的内容。

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

是否editCell()等同于tbody.insertRow(r)可能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数组 - 所有行的单元格。所以现在你可以“重用”它们来更新表格内容。

注意，这个函数使用表，但没有创建它（你的entiry函数创建了表行和单元格）。

Answer 2

您可以通过为表格中的每个单元格分配ID来简化您的生活，例如

<table>
    <tr id=tr_1>
        <td id=td_a1>a</td>
        <td id=td_a2>a</td>
    </tr>
    <tr id=tr_2>
        <td id=td_b1>a</td>
        <td id=td_b2>a</td>
    </tr>
 <table>

等。这种方式的id很容易以编程方式生成，然后使用：

function changeCell(id, txt) {
    var td = document.getElementbyId (id);
    td.innerHTML=txt;
}

Answer 3

使用document.createElement('<input type="text"/>')代替document.createTextNode并生成输入框

Answer 4

如果你想编辑你需要的表格的单元格...这很难告诉你

你有多少inpt领域？

您想如何编辑表格？将单元格的文本替换为新输入，然后编辑它，或创建一个完整的新表单，您可以在其中输入行/列num，然后编辑单元格。或者怎么样？

这并不容易。你应该告诉你希望这个工作。

更改Javascript函数以编辑单元格而不是附加它们

4 个答案: