js在table中添加删除tbody内容

<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) οnclick=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); }
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的实现: HTML代码: ```html <input type="text" id="input-name" placeholder="姓名"> <input type="text" id="input-age" placeholder="年龄"> <button id="btn-add">添加</button> <table id="table"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody id="table-body"></tbody> </table> ``` JS代码: ```js // 获取DOM元素 const inputName = document.getElementById('input-name'); const inputAge = document.getElementById('input-age'); const btnAdd = document.getElementById('btn-add'); const tableBody = document.getElementById('table-body'); // 定义数据 let data = []; // 添加事件监听器 btnAdd.addEventListener('click', () => { const name = inputName.value.trim(); const age = inputAge.value.trim(); if (name && age) { // 添加数据 data.push({ name, age }); // 清空输入框 inputName.value = ''; inputAge.value = ''; // 更新表格 renderTable(); } }); // 渲染表格 function renderTable() { let html = ''; data.forEach((item, index) => { html += ` <tr> <td>${item.name}</td> <td>${item.age}</td> <td> <button class="btn-delete" data-index="${index}">删除</button> <button class="btn-edit" data-index="${index}">编辑</button> </td> </tr> `; }); tableBody.innerHTML = html; // 添加删除和编辑事件监听器 const btnDeletes = document.querySelectorAll('.btn-delete'); btnDeletes.forEach(btn => { btn.addEventListener('click', () => { const index = btn.getAttribute('data-index'); data.splice(index, 1); renderTable(); }); }); const btnEdits = document.querySelectorAll('.btn-edit'); btnEdits.forEach(btn => { btn.addEventListener('click', () => { const index = btn.getAttribute('data-index'); const item = data[index]; const newName = prompt('请输入新的姓名', item.name); const newAge = prompt('请输入新的年龄', item.age); if (newName && newAge) { data.splice(index, 1, { name: newName, age: newAge }); renderTable(); } }); }); } ``` 实现思路: 1. 定义数据变量 `data`,存放添加内容,初始值为空数组 `[]`。 2. 获取输入框和按钮的 DOM 元素。 3. 给按钮添加点击事件监听器,当点击按钮时,获取输入框的值,如果值不为空,则将输入的内容添加到 `data` 数组,并清空输入框;最后调用 `renderTable()` 函数更新表格。 4. 定义 `renderTable()` 函数,用于将 `data` 数组内容渲染到表格。首先定义空字符串 `html`,然后使用 `forEach()` 遍历 `data` 数组,将每个元素的 `name` 和 `age` 属性拼接成一行 HTML 代码,并添加到 `html` 。最后将 `html` 赋值给表格的 `innerHTML` 属性,更新表格内容。 5. 在 `renderTable()` 函数添加删除和编辑按钮的事件监听器。首先使用 `querySelectorAll()` 获取所有的删除和编辑按钮元素,然后使用 `forEach()` 遍历这些元素,给每个按钮添加点击事件监听器。当点击删除按钮时,获取该按钮的 `data-index` 属性,即该按钮对应的数据在 `data` 数组的下标,然后使用 `splice()` 方法从 `data` 数组删除该元素,并调用 `renderTable()` 函数更新表格。当点击编辑按钮时,同样获取该按钮的 `data-index` 属性,然后使用 `prompt()` 方法弹出输入框,让用户输入新的姓名和年龄。如果用户输入了新的姓名和年龄,则使用 `splice()` 方法将 `data` 数组对应元素替换成新的内容,并调用 `renderTable()` 函数更新表格。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值