<html>
<head>
<title>JS测试</title>
<script type="text/javascript">
var num = 2;
function addRow(){
var tr = document.createElement("tr");
var td = document.createElement("td");
var te = document.createTextNode('row '+num++);
td.appendChild(te);
tr.appendChild(td);
var table = document.getElementById("table");
if(tbody.rows.length == 6){
alert('不能加了!');
}else{
table.appendChild(tr);
}
}
</script>
</head>
<body">
<table id="table">
<tr id="n">
<th>行数</th>
</tr>
<tr>
<td>row 1</td>
</tr>
</table>
<input type="button" value="Button" οnclick="addRow();">
</body>
</html>
上面JS代码不能向<table>中添加行,因为IE中<table>标签不支持appendChild()方法.
解决办法:在<table>标签中加入<tbody>标签,使用tbody元素加入新行.
<html>
<head>
<title>JS测试</title>
<script type="text/javascript">
var num = 2;
function addRow(){
var tr = document.createElement("tr");
var td = document.createElement("td");
var te = document.createTextNode('row '+num++);
td.appendChild(te);
tr.appendChild(td);
var tbody= document.getElementById("tbody");
if(tbody.rows.length == 6){
alert('不能加了!');
}else{
tbody.appendChild(tr);
}
}
</script>
</head>
<body">
<table>
<tbody id="tbody">
<tr id="n">
<th>行数</th>
</tr>
<tr>
<td>row 1</td>
</tr>
</tbody>
</table>
<input type="button" value="Button" οnclick="addRow();">
</body>
</html>
