<html>

<head>

<title>动态表格</title>

<script type="text/javascript">

 

//动态添加行

function addRow(){

var input1=document.createElement("input");

input1.setAttribute("type","text");

input1.setAttribute("onclick","addRow()");

var td1=document.createElement("td");

td1.appendChild(input1);

var tr1=document.createElement("tr");

tr1.appendChild(td1);

 

//克隆td1  true表示td1下面所有的元素都克隆

var td2=td1.cloneNode(true);

tr1.appendChild(td2);

 

var td3=td1.cloneNode(true);

tr1.appendChild(td3);

 

var tbody=document.getElementById("t").children[0];

tbody.appendChild(tr1);

 

var trs=document.getElementsByTagName("tr");

 

if(trs.length>=2){

for(var i=0;i<3;i++){

//去掉倒数第二行每一个input的onclick事件

tbody.children[trs.length-2].children[i].children[0].removeAttribute("onclick");

}

}

}

</script>

</head>

<body >

<table id="t" border="1">

<tbody>

<tr><th>id</td><th>name</th><th>age</th></tr>

<tr><td><input type="text" onclick="addRow()"/></td><td><input type="text" onclick="addRow()"/></td><td><input type="text" onclick="addRow()"/></td></tr>

</tbody>

</table>

</body>

</html>

posted on 2013-03-29 16:26  LZU-GIS  阅读(158)  评论(0编辑  收藏  举报