Используйте jQuery insertAfter в существующей функции, которая добавляет таблицу

Question

Вот что у меня есть: http://jsfiddle.net/JEAkX/1/

Я пытаюсь заставить добавленные ячейки следовать за последними tr.Кроме того, я пытаюсь изменить функцию appendTable(id) так, чтобы выходные ячейки содержали свое содержимое внутри поля <input>, как и исходные ячейки.

Для дополнения <input> я попробовал:

Добавление кода поля ввода <input type='text' size='1' value='subset[i++]' />, но безуспешно. Я также попробовал его в другом месте, но изменил значение на value='c'.

Для добавления после последней попытки я попытался:

Используя jQuery и .insertAfter('#alphabetTable tbody>tr:last') Я добавил его в различные части строки cell.appendChild(document.createTextNode(subset[i++]));, но не повезло ... вероятно, неправильноразмещение?

Мне кажется, что я на правильном пути, но мне не хватает знаний Javascript, чтобы точно знать, куда вставить код и нужно ли менять окружающий код.

Answer 1

Jquery:

var $tbody = $('#mytableid tbody:eq(0)');
var $tdLen = $('#mytableid tbody:eq(0) tr:eq(0) td').length; // cell length in row
$("<tr>").appendTo($tbody);
//append cells to row with input text
for (var i=0;i<$tdLen;i++){
    var inp = $("<input>").attr("type","text").attr("name","text"+i).val(i);
    var tdTemo = $("<td>");
    inp.appendTo(tdTemo);
    tdTemo.appendTo("tr:last");
}

этот скрипт добавит строку в таблицу и добавит 4 ячейки, содержащие текст ввода типа :)

Answer 2

С JQuery будет проще, но вот подсказка:

function appendTable(id)
{
    var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
    var i = 0;
    var html = '<tr>';
    for(i=0;i<4;i++){
        html += '<td><input type="text" size="1"/></td>';
    }
    html += '</tr>';

    tbody.innerHTML += html;
}