html文件中的代码如下:
<html>
<script type="text/javascript">
var records=[{"name":"Fred","id":"123"},{"name":"Jim","id":"456"}];
</script>
<table id="tb1">
<tr id="row1">
<td style="background-color:gray" id="name">name</td><td style="background-color:gray" id="id">id</td>
</tr>
<tr id="row2"><td>shouldn't be added here</td><td>neither here</td></tr>
</table>
</html>
我想在纯javascript中添加row1和row2之间的记录内容.(没有任何第三方javascript框架)我该怎么办？
您不添加"标签",而是添加到元素中.
在一般情况下,您可以通过document.createElement(或通过将包含HTML的字符串分配给现有元素的innerHTML属性)来创建元素.
使用appendChild或添加元素作为其他元素的子元素insertBefore.
因此,举例来说,这里是你如何可以添加含有两个表格单元格的行之前的id="row2"在表:
var newRow = document.createElement('tr');
newRow.appendChild(document.createElement('td')); // The first cell
newRow.appendChild(document.createElement('td')); // The second cell
var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2); // Insert it
但是,正如Heitor所指出的那样,对于表,可以使用特定的方法,而不是冗长的:
insertRow 在桌子和tbody/thead元素上insertCell 在行元素以下是上面的代码insertCell:
var newRow = document.createElement('tr');
newRow.insertCell(-1); // The first cell
newRow.insertCell(-1); // The second cell
var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2); // Insert it
我们可以同时使用insertRow:
var row2 = document.getElementById("row2"); // Get existing row
var newRow = row2.parentNode.insertRow(row2.rowIndex); // Create and insert new row
newRow.insertCell(); // The first cell
newRow.insertCell(); // The second cell
...但是我们将重复更改显示的DOM(添加一个空白行,然后添加一个单元格,然后添加另一个单元格),如果可能,最好避免.在前两个示例中,我们创建了行并在将整个结构添加到DOM之前添加了其单元格,执行了一个实时DOM操作.
DOM API可能是冗长的,有点笨拙,它的实现可能会有点浏览器到浏览器(尽管以上所有都是可靠的).你显然可以直接使用它,但你也可以使用几个好的JavaScript DOM操作库中的任何一个来为你整理一些浏览器兼容性东西,并获得许多有用的实用程序功能.
| 归档时间： |
|
| 查看次数： |
1425 次 |
| 最近记录： |