更改 Javascript 函数以编辑单元格而不是附加它们 [英] Change Javascript function to edit cells instead of append them

问题描述

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

Sorry for the vagueness of my question. Let me start from scratch.

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

和我发布的另一个问题相关:可编辑表格的 Jeditable 替代方案单元格

and this other question I posted is related: Alternative to Jeditable for editable table cells

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

Although I eventually want to do away with the form on the top and make the cells editable, this question is primarily about changing the table contents as opposed to adding new cells.

如您所见，如果您在左上角的输入框中输入一个字母并单击出来，它会将数组的剩余部分(在 slice 之后)附加到表格中.我希望它更改现有单元格的内容.

As you can see, if you enter a single letter into the top left input box and click out, it appends the table with the remaining part of the array (after a slice). I would like instead for it to change the contents of the existing cells.

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

I have tried changing cell.appendChild(document.createTextNode to innerHTML but it ended up doing the exact same thing. My guess is that it has to do with changing the var tbody = document.getElementById(id).getElementsByTagName("tbody")[0]; to var tbody = document.getElementById(id).getElementsByTagName("td")[0]; but when i do that it just breaks.

是否有 editCell() 等价于 tbody.insertRow(r) 也许 td.innerHTML(r)?

Is there an editCell() equivalent of tbody.insertRow(r) Maybe td.innerHTML(r)?

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

Eventually I will add a button that can add and remove rows.

希望这样更好.

推荐答案

UPDATED: 感谢您编辑问题，我看到了问题，尝试更改您的函数 appendTable 的代码(但是这个名称是不再好;):

UPDATED: thank you for editing question, I see the problem, try to change code of your function appendTable (however this name is not good anymore ;):

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++];
         }
     }
 }

您的错误是您一直插入行，并将单元格插入其中.相反，您使用 tbody 元素的数组 rows(显然它为您提供了表格的所有行)，并且 rows 依次具有 rows 数组code>cells - 行的所有单元格.所以现在您可以重用"它们来更新表格内容.

your mistake was that you inserted rows all the time, and inserted cells into them. Instead you use arrays rows of tbody element (obvivious it gives you all rows of the table), and rows in its turn has array of cells - all cells of row. So now you can 'reuse' them to update table content.

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

Notice, this function use table, but not creates it (your entiry function created table rows and cell).

这篇关于更改 Javascript 函数以编辑单元格而不是附加它们的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！