js在table中添加删除tbody内容

最新推荐文章于 2025-06-22 10:00:00 发布

转载最新推荐文章于 2025-06-22 10:00:00 发布 · 3.8k 阅读

C#方面同时被 2 个专栏收录

7 篇文章

订阅专栏

javascipt

3 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript创建动态表格，并提供了添加、删除行的代码示例，包括如何为页面添加新行和删除现有行的方法。

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

<table width="400" border="1" cellspacing="0" cellpadding="0" id="table1">
</table>
<script language="javascript">
var value = "内容";
var value1 = "<a href='*'>link</a>";
var row = 5; //创建5行
var col = 7; //创建7格
var tbody = document.createElement("tbody"); //新建一个tbody类型的Element节点
var tbody1=document.createAttribute("tbody1");

for(var i=0;i<row;i++)   
{
 var tr = document.createElement("tr"); //新建一个tr类型的Element节点
 for(var j=0;j<col;j++)  
 {
  var td = document.createElement("td"); //新建一个td类型的Element节点
  td.innerHTML = value1;// 链接。。。。
  tr.appendChild(td); //将节点td加入tr中
 }
 tbody.appendChild(tr); //将节点tr加入tbody中
}
var parNode = document.getElementById("table1"); //定位到table上
parNode.appendChild(tbody); //将节点tbody加入节点尾部
</script>

一次添加一个tr,可以使用以下
<script>
var i=0,arr=new Array('F9F9F9','F0F0F0');
function addNew(){
var parNode = document.getElementById("table1"); //定位到table上
 tr=parNode .insertRow();tr.style.backgroundColor=arr[i%2];

 tr.insertCell().innerText="图片"+(++i);
 tr.insertCell().innerHTML='<input type=file name=pic'+i+' class=border_index> <a href=javascript:void(0) onclick=del()>删除</a>'
}}

整块删除只需要
<script language="javascript">
var parNode = document.getElementById("table1"); //定位到table上
var tbody;
if(-[1,]){ //非IE
tbody=document.getElementsByTagName("tbody")[0];
parNode.removeChild(tbody); 
}else{ //IE
tbody=document.getElementsByTagName("tbody")[0];
parNode.removeNode(tbody); 
}

一次删除 一个tr行 可以用以下方法
<script language="javascript">
var parNode=document.getElementById("table1");
parNode.deleteRow(2);//从表中删除第三行tr

</script>

想要删除Tbody中的内容但是不删除tbody

while (tbody.hasChildNodes()) { tbody.removeChild(tbody.lastChild); }