элементы innerHTML в неправильном месте - PullRequest
Новая
       2

элементы innerHTML в неправильном месте

0 голосов
/ 14 марта 2012

Мое понимание innerHTML не совсем понятно, поэтому у меня возникли некоторые проблемы.

Это производит все мои тд за пределами стола. Что я делаю не так? 

var list = document.getElementById("procTable");
list.innerHTML = "<table style='border:gray solid 1px;'><tr>";
for (var i = 0; i < result.d.ProcessDataColumnModel.length; i++) {
    list.innerHTML += "<td style='border:gray solid 1px' width='" + (result.d.ProcessDataColumnModel[i].Width) + "'>" + (result.d.ProcessDataColumnModel[i].Caption);
}

Ответы [ 2 ]

2 голосов
/ 14 марта 2012

Поскольку вы добавляете недопустимый HTML, браузер помогает вам, добавляя пропущенные элементы. Затем, когда вы добавляете ячейки таблицы, они добавляются после закрытой таблицы.

Попробуйте добавить таблицу, затем строку, затем ячейки. Кроме того, сначала соберите всю строку, а затем добавьте ее за один раз, обновление DOM (т. Е. Использование innerHTML) - медленная операция. 

var list = document.getElementById("procTable");
var listInner = "<table style='border:gray solid 1px;'><tr>";
for (var i = 0; i < result.d.ProcessDataColumnModel.length; i++) {
   listInner += "<td style='border:gray solid 1px' width='" + (result.d.ProcessDataColumnModel[i].Width) + "'>" + (result.d.ProcessDataColumnModel[i].Caption) + "</td>";
}
listInner += "</tr></table>";
list.innerHTML = listInner;
1 голос
/ 14 марта 2012

Это иногда случается, если вы неправильно закрываете тегив вашем примере: 

var list = document.getElementById("procTable");
list.innerHTML = "<table style='border:gray solid 1px;'><tr>";
for (var i = 0; i < result.d.ProcessDataColumnModel.length; i++) {
    list.innerHTML += "<td style='border:gray solid 1px' width='" + (result.d.ProcessDataColumnModel[i].Width) + "'>" + (result.d.ProcessDataColumnModel[i].Caption)+ "</td>";
}
list.innerHTML += "</tr></table>";
...