js 动态平添删除 tr-JavaSript-爱易网页

js 动态平添删除 tr

日期：2014-05-16　浏览次数：20310 次

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">

<head>

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>

? <tr>

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

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

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

? </tr>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js 动态平添删除 tr

相关资料更多>

推荐阅读更多>

js 动态 平添 删除 tr

相关资料更多>

推荐阅读更多>

js 动态平添删除 tr