`

js 动态 添加 删除 tr

 
阅读更多

今天给新人出了一道题：

 

dom 和 javascript 简单操作 完成对 table tr 的动态添加 删除功能。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<script type="text/javascript">

function insertRow() {  

    var num=0;  

var x=document.getElementById('newbody');  

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

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

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

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

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

nameInput.type = "text";

nameInput.name = "name";

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

valueInput.type = "text";

valueInput.name = "value";

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

btnInput.type = "button";

btnInput.value = "delete";

btnInput.onclick = function(){

deleteRow(btnInput);

};

 

td0.appendChild (nameInput);

td1.appendChild (valueInput);

td2.appendChild (btnInput);

 

tr.appendChild (td0);

tr.appendChild (td1);

tr.appendChild (td2);

 

x.appendChild (tr);

 

}  

function deleteRow(obj) {  

var r = obj.parentNode.parentNode;

   var x=document.getElementById('newbody');  

x.removeChild(r);

} 

 

</script>

</head>

 

<body>

<div style="margin: 0 auto;text-align:center;width:100%;height:100%">

<table width="70%" border="1" align="center" id="tableObj">

  <tr>

    <th scope="col">name</th>

    <th scope="col">value</th>

    <th scope="col"><input type="button" value="Add" onclick="insertRow();" /></th>

  </tr>

  <tbody id="newbody"></tbody> 

</table>

</div>

</body>

</html>


分享到：
| ie8下 vml
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics