Измените функцию Javascript для редактирования ячеек вместо их добавления

Question

Извините за неопределенность моего вопроса.Позвольте мне начать с нуля.

В настоящее время у меня есть это: http://jsfiddle.net/kmg4x/1/

, и этот другой вопрос, который я разместил, связан: Альтернатива Jeditable для редактируемых ячеек таблицы

Хотя яв конце концов, нужно покончить с формой сверху и сделать ячейки редактируемыми, этот вопрос в первую очередь касается изменения содержимого таблицы, а не добавления новых ячеек.

Как вы можете видеть, если вы вводите одну букву в верхнем левом поле ввода и щелкаете мышью, к ней добавляется таблица с оставшейся частью массива (после 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

Вы можете упростить свою жизнь, назначив идентификаторы каждой ячейке таблицы, например,

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

и т. Д. Идентификаторы этого способа очень просто генерировать программно, а затем использовать:

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

Answer 2

ОБНОВЛЕНО: спасибо за редактирование вопроса, я вижу проблему, попробуйте изменить код вашей функции 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 3

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

сколько у вас есть поле ввода?

как вы хотите отредактироватьТаблица?замените текст ячейки на новый ввод и затем отредактируйте его, или создайте полностью новую форму, где вы можете ввести номер строки / столбца и затем отредактировать ячейку.или как?

это не так просто.Вы должны сказать свое желание, чтобы сделать эту работу.

Answer 4

используйте document.createElement('<input type="text"/>') вместо document.createTextNode и создайте поле ввода