Генерация строк таблицы на форме с помощью JS


Как вы можете видеть, следующие-это довольно некрасиво и, кажется, излишне долго. Есть ли более короткий/аккуратнее способ сделать это?

function addNewRow(body, id){ 
    var myRow = document.createElement("tr");
    myRow.id = id+'';
    var c1 = document.createElement("td");
    var c2 = document.createElement("td");
    var c3 = document.createElement("td");
    var c4 = document.createElement("td");
    var d = document.createElement("div");
    myRow.appendChild(c1);
    myRow.appendChild(c2);
    myRow.appendChild(c3);
    myRow.appendChild(c4);
    myRow.appendChild(d);

    var i1 = document.createElement("input");
    var i2 = document.createElement("input");
    var i3 = document.createElement("input");
    var i4 = document.createElement("input");

    i1.type = 'text';
    i1.id = 'drwID_' + id;
    i1.name = 'drwID_' + id;
    i1.disabled = !editing;

    i2.type = 'text';
    i2.id = 'pos_' + id;
    i2.name = 'pos_' + id;
    i2.disabled = !editing;

    i3.type = 'text';
    i3.id = 'stm_' + id;
    i3.name = 'stm_' + id;
    i3.disabled = !editing;

    i4.type = 'text';
    i4.id = 'note_' + id;
    i4.name = 'note_' + id;
    i4.disabled = !editing;

    c1.appendChild(i1);
    c2.appendChild(i2);
    c3.appendChild(i3);
    c4.appendChild(i4);
    body.appendChild(myRow);
}


713
2
задан 4 июля 2011 в 10:07 Источник Поделиться
Комментарии
1 ответ

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

function addNewRow(body, id) {
var myRow = document.createElement("tr"),
d = document.createElement("div"),
inputPrefix = ['drwID_', 'pos_', 'stm_', 'note_'];

myRow.id = id + '';

for(var i = 0; i < inputPrefix.length; i++){
var td = document.createElement('td'),
input = document.createElement('input');

input.type = 'text';
input.id = inputPrefix[i] + id;
input.name = inputPrefix[i] + id;
input.disabled = !editing;

td.appendChild(input);
myRow.appendChild(td);
}

myRow.appendChild(d);
body.appendChild(myRow);
}

Создается недопустимый код HTML здесь хотя - трs не может содержать див элементов.

2
ответ дан 4 июля 2011 в 11:07 Источник Поделиться

Другие вопросы по теме
В JavaScript динамически