像表格中增加或减少一行:
在表格中IE不认识appandChild();为了兼容性,需要用insertRow(),insertCell()和deleteRow(),deleteCell();
注意:参数为0表示从表格上面开始增加/减少,参数为-1表示从下面开始增加/减少
html代码:
<table id="table1" cellpadding="0" cellspacing="0" border="1" width="300px">
<tr><td>苹果</td><td>香蕉</td><td>葡萄</td><td>橘子</td></tr>
<tr><td>游泳</td><td>跑步</td><td>跳绳</td><td>体操</td></tr>
<tr><td>桌子</td><td>板凳</td><td>沙发</td><td>吊灯</td></tr>
</table>
<button type="button" οnclick="addTR()">给表格中加一行</button>
<button type="button" οnclick="delTR()">给表格中减一行</button>
</body>
</html>
js代码:
var $ = function(id){
return document.getElementById(id);
}
var nTr = document.getElementsByTagName("tr");
var nTd = document.getElementsByTagName("td");
var n = nTd.length/nTr.length;
function addTR(){
var tr = $("table1").insertRow(-1); //注意:参数是0表示从上面增加/减少,参数是-1表示从下面增加/减少。
for(var i=0;i<n;i++){
var td = tr.insertCell(-1);
td.innerHTML = "11111";
}
}
function delTR(){
//alert(n)
$("table1").deleteRow(-1) //注意如果是table 就deleteRow(),如果是row 就deleteCell()。默认是从最后一个row开始减。如果想从上面减,将deleteRow(0)即可
}