После удаления изменение идентификатора текстового поля внутри идентификатора ячейки не работает

Question

У меня есть таблица с использованием Javascript, и я удаляю строки с помощью функции удаления

После удаления я пытаюсь переиндексировать идентификаторы ячеек таблицы

function updateRowCount(){
         var table = document.getElementById("ordertable");
         var rowcountAfterDelete = document.getElementById("ordertable").rows.length;  
         for(var i=1;i<rowcountAfterDelete;i++){ 
              table.rows[i].id="row_"+i;
              table.rows[i].cells[0].innerHTML=i+"<input type='checkbox' id='chk_" + i + "'>";
              table.rows[i].cells[1].id="notes_"+i;
                table.rows[i].cells[2].id="amount"+i;
          }
}

Но следующие строки не работают:

table.rows[i].cells[1].id="notes_"+i;
table.rows[i].cells[2].id="amount"+i;

<td>содержит поля ввода, это будет так

<td><input type="text" title="notes"></td>
<td><input type="text" title="amount"></td>

Как я могу изменить идентификатор текстового поля внутри <td> или клетка?

Answer 1

Я сделал jsfiddle здесь https://jsfiddle.net/an87ka5p/

Я обновил это, чтобы ответить на вопрос в комментариях

function test() {
    var table = document.getElementById("ordertable");
    var rowcountAfterDelete = table.rows.length;
    for (var i = 0; i < rowcountAfterDelete; i++) {
        table.rows[i].id = "row_" + i;
        table.rows[i].cells[0].innerHTML = i + "<input type='checkbox' id='chk_" + i + "'>";
        table.rows[i].cells[1].getElementsByTagName("input")[0].id = "notes_" + i;
        table.rows[i].cells[2].getElementsByTagName("input")[0].id = "amount_" + i;
    }
}