javascript 动态添加表格

三世轮回 提交于 2021-02-20 05:56:30

<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" οnclick="addRow()"/></td><td><input type="text" οnclick="addRow()"/></td><td><input type="text" οnclick="addRow()"/></td></tr>

</tbody>

</table>

</body>

</html>

本文同步分享在 博客“LZU-GIS”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!