Change Javascript function to edit cells instead of append them

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

I currently have this: http://jsfiddle.net/kmg4x/1/

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 开发者_如何学Gowith the remaining part of the array (after a slice). I would like instead for it to change the contents of the existing cells.

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.

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.

Hope this is better.

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

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).

You can make your life easier by assigning ids to each cell in the table, e.g.

<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.The ids this way are very easy to generate programatically, and then use:

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

use document.createElement('<input type="text"/>') instead of document.createTextNode and generate input box

if you want to edit cells of a table you need to ... this is hard to tell you

how many inpt field you have?

how do you want to edit the table? replace the text of the cell to a new input and then edit this, or create a complete new form where you can eneter row/column num and then edit the cell. or how?

this is not so easy. you should tell your wish ho to make this work.