table行的操作，基于IE

最新推荐文章于 2021-09-29 13:44:30 发布

yanlei3032

最新推荐文章于 2021-09-29 13:44:30 发布

阅读量145

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： IE Firefox

本文链接：https://blog.youkuaiyun.com/yanlei3032/article/details/83643750

javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种在网页中通过JavaScript实现表格行的添加与删除的方法。具体包括使用insertRow()和insertCell()方法来增加行及单元格，并设置单元格的内容；使用deleteRow()方法来删除指定行。此外，还提供了如何通过点击按钮触发这些操作的示例。

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

添加行
function addSingleRow(styleid, desc, styletype, quality, analyse, size, rate,
weistr, weiend, weiavg) {
//bodyTbl -->table 元素可以用document.getElementById("ID名字")获取，
//当然获取方式很多,添加行也不一定要这么写，可以用appendChild方法添加
var myrow = bodyTbl.insertRow();
var cell = myrow.insertCell();
cell.innerHTML = "";
var cell = myrow.insertCell();
cell.innerHTML = "<span>" + desc + "</span>";
var cell = myrow.insertCell();
cell.innerHTML = "<input type='hidden' name='styleid' value='" + styleid
   + "'/>" + "<span>" + styletype + "</span>";
cell = myrow.insertCell();
cell.innerHTML = "<input type='hidden' name='quality' value='" + quality[0]
   + "'/>" + "<span>" + quality[1] + "</span>"
cell = myrow.insertCell();
cell.innerHTML = "<input type='hidden' name='analyse' value='" + analyse[0]
   + "'/>" + "<span>" + analyse[1] + "</span>";
cell = myrow.insertCell();
cell.innerHTML = "<input type='hidden' name='size' value='" + size[0]
   + "'/>" + "<span>" + size[1] + "</span>";
cell = myrow.insertCell();
cell.innerHTML = "<input type='hidden' name='rate' value='" + rate[0]
   + "'/>" + "<span>" + rate[1] + "</span>";
cell = myrow.insertCell();
cell.innerHTML = "<input type='text' style='width:80px' value='" + weistr
   + "' name='startwei'>";
cell = myrow.insertCell();
cell.innerHTML = "<input type='text' style='width:80px' value='" + weiend
   + "' name='endwei'>";
cell = myrow.insertCell();
cell.innerHTML = "<input type='text' style='width:80px' value='" + weiavg
   + "' name='avgwei'>";
cell = myrow.insertCell();
cell.innerHTML = "<input type='button' value='删除' class='bt_a' onclick='deleteRow()'>";
}
删除行
function deleteRow() {
if (!confirm("确定删除?"))
return;
//event好像是IE特有的，在firefox估计会出问题
var index = event.srcElement.parentNode.parentNode.rowIndex;
bodyTbl.deleteRow(index - 1);
setRowNum();
}

function setRowNum() {
for ( var i = 0; i < bodyTbl.rows.length; i++) {
bodyTbl.rows[i].cells[0].innerHTML = (i + 1);
}
}