javascript 动态添加表格

2021-02-20 04:48发布

站内文章 / 移动开发
503 0 0

<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源创计划”，欢迎正在阅读的你也加入，一起分享。

标签：
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~