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

Question

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

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

我发布的另一个问题是相关的：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 的数组 - 行的所有单元格。所以现在您可以“重用”它们来更新表格内容。

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

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>

etc.这种方式的ids很容易以编程方式生成，然后使用：

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

Answer 3

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

你有多少个 inpt 字段？

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

这并不容易。你应该告诉你的愿望来完成这项工作。

Answer 4

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