我正在用Javascript动态构建一个html表;这是我的html表:
<table class="ui-list" cellpadding="2" id = "tbl">
<thead>
<tr>
<th>Artikel ID</th>
<th>Artikelnr</th>
<th>Bezeichnung</th>
<th>Stk.</th>
<th><?php echo FW_HTML_Button::build('entfernen', array('onclick' => '' ,'id'=>'get_button')); ?></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td>Gesamt:</td>
<td></td>
<td>Action:</td>
</tr>
<!-- Fill with JS -->
</tbody>
</table>
这就是我用行填充它的方式:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = obj[16][count]["id"]["article_id"];
cell1.innerHTML = element1;
var cell2 = row.insertCell(1);
var element2 = obj[16][count]["id"]["article_no_internal"];
cell2.innerHTML = element2;
var cell3 = row.insertCell(2);
var element3 = obj[16][count]["id"]["article_name_internal"];
cell3.innerHTML = element3;
var cell4 = row.insertCell(3);
cell4.innerHTML = obj[16][count]["stk"];;
var cell5 = row.insertCell(4);
var element4 = document.createElement("input");
element4.type = "checkbox";
cell5.appendChild(element4);
}
它工作得很好,我唯一的问题就是你可以看到我已经在我的html部分中有一行了,我想把新行放在我在html中创建的行之前。现在它总是将新行放在写入'gesamt'和'action'的行之后。有可能使它与众不同吗?
答案 0 :(得分:2)
使用
var row = table.insertRow(rowCount - 1);
而不是
var row = table.insertRow(rowCount);
(当然,假设您在表格中总是有一个页脚行,这是值得保证的。)
答案 1 :(得分:1)
您可以使用JQuery .prepend()函数。 它在父元素的开头插入元素: http://api.jquery.com/prepend/