|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2009-09-22
最后修改：2009-09-22
本机只有ie7,ff3.5,opera10，测试在这三个环境中测试通过。
在标准DOM中添加元素一般使用appendChild();
那在JavaScript中怎么在一个table中添加一行呢？ <!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function insRow()
{
var tbl = document.getElementById('myTable');
var row = tbl.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML="new cell";
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>
cell
</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="Insert row">
</body>
</html>
比使用标准的DOM还简单，而且也符合w3c标准，但有一点要说明的是： innerHTML这个方法虽然没有在w3c文档中出现，但是由于使用的广泛性，很多浏览器都进行了支持，添加文本节点（text nodes）时可以用innerHTML，如果非要符合w3c标准，可以用createTextNode(str)方法，本例中在JavaScript最后一行改为：cell.appendChild(document.createTextNode("new cell"))。
但是上面的例子还有一个与appendChild()不同的地方，就是appendChild值插在原有元素的后面，但是例子中是插在了第一行。怎么插在表格的最后一行，或者插在当前行的后一行或者前一行怎么做呢？
下面附加一段带有 在最后加一行，本行前前加一行，本行后加一行，删除当前行的html代码 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmt;charset=utf-8">
<script type="text/javascript">
var i=0;
function insRow(){
var tbl = document.getElementById("myTable");
insRowIndex(tbl.rows.length);
}
function insRowIndex(rowIndex){
var tbl = document.getElementById("myTable");
var row = tbl.insertRow(rowIndex);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
cell0.innerHTML = "cell " + i++;
cell1.innerHTML = " <input type='button' value='delete' onclick='delRow(this)'>"
+"<input type='button' value='insBefore' onclick='insBefore(this)'>"
+"<input type='button' value='insAfter' onclick='insAfter(this)'>";
}
function delRow(row){
var tbl = document.getElementById("myTable");
var rowIndex = row.parentNode.parentNode.rowIndex;
tbl.deleteRow(rowIndex);
}
function insBefore(row){
var rowIndex = row.parentNode.parentNode.rowIndex;
insRowIndex(rowIndex)
}
function insAfter(row){
var rowIndex = row.parentNode.parentNode.rowIndex;
insRowIndex(rowIndex+1)
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>
单元格
</td>
<td>
操作
</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="Insert row">
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
浏览 7388 次
