更改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/

和其他这个问题我张贴有关：<一href=\"http://stackoverflow.com/questions/5250728/alternative-to-jeditable-for-editable-table-cells\">Alternative以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.

正如你所看到的，如果你输入一个字母到左上角输入框，然后点击出来，追加与阵列的其余部分的表（片后）。我想，而不是为它改变现有单元的内容。

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）？

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

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

希望这是更好的。

推荐答案

更​​新：谢谢你编辑的问题，我看这个问题，试图改变你的函数code 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 元素（obvivious它给你的表的所有行），而行反过来有细胞阵列 - 行的所有单元格。所以现在你可以'重用'他们更新表的内容。

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.

注意，此功能使用表，而不是创建它（你entiry功能创建的表行和单元格）。

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

这篇关于更改JavaScript函数编辑细胞，而不是他们追加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！