javascript动态添加删除表格及克隆表格

最新推荐文章于 2021-02-28 14:11:33 发布

michael200801

最新推荐文章于 2021-02-28 14:11:33 发布

阅读量555

点赞数

分类专栏： JavaScript 文章标签： javascript button function input border firefox

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文通过具体示例介绍了如何使用JavaScript操作DOM元素，包括插入、删除行、克隆表格及添加和移除子元素的方法。这些方法有助于开发者更好地理解和掌握网页动态更新的技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

insertRow()和deleteRow()方法：

<button onClick="add()">add</button>
<button onClick="del()">del</button>
<button onClick="test()">test</button>
<table id="t1" border="1"></table>
<script language="JavaScript">
var n=0;
function add(){
n++;
t1.insertRow().insertCell().innerHTML = '<input type="radio" name="tt"><input name="test'+n+'"><button onclick="deleteRow(this)">delthis</button>';
//t1.insertRow().insertCell().innerHTML = '<input type="radio" name="tt"><input name="test'+t1.rows.length+'">';
}
function del(){
var c = document.getElementsByName('tt');
for(var i=0; i<c.length; i++)
if(c[i].checked)
t1.deleteRow(i);
}
function deleteRow(obj){
t1.deleteRow(obj.parentElement.parentElement.rowIndex);
}
function test(){
for(i=0;i<t1.rows.length;i++) alert(t1.rows[i].cells[0].innerHTML);
}
</SCRIPT>

cloneNode()方法克隆表格：

<input type=button value=clone name=ok onclick=add()>
<table border=1>
<tr id=a1 name=a1>
<td><input></td><td><input></td>
</tr>
</table>
<script language=JavaScript>
i=1
function add(){
++i;
var newTR = a1.cloneNode(true);
newTR.id="a"+i;
newTR.name="a"+i;
a1.parentNode.insertAdjacentElement("beforeEnd",newTR);
//alert(a1.parentElement.innerHTML);
}
</script>

appendChild() & removeChild()方法：(firefox only)

<div id="oTest">1234 </div>
<button onclick="oT=document.getElementById('oTest');oS=document.createElement('span');oS.textContent='1234 ';oT.appendChild(oS)">append +</button><button onclick="oT=document.getElementById('oTest');oT.removeChild(oT.lastChild)">remove -</button>