动态创建table，并可以根据条件进行适当行的删除

最新推荐文章于 2023-02-04 09:20:24 发布

japankn

最新推荐文章于 2023-02-04 09:20:24 发布

阅读量151

点赞数

分类专栏： javascript 文章标签： JavaScript HTML ViewUI

javascript 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了一种利用JavaScript动态生成和删除HTML表格行的有效方法。通过具体实例展示了如何在网页中添加和移除表格行，特别关注批量删除指定行的操作技巧。

在使用DOM动态生成table的时候我通常的写法如下：

//获得tbody节点，在DOM解析时，默认会有这个节点。

var tbody = document.getElementById("table_name").firstChild;

var tr = document.createElement("tr");

var td = document.createElement("td");

td.appendChild(document.createTextNode("td中的内容"));

tr.appendChild(td);

tbody.appendChild(tr);

类似上面的写法如果没有成批的删除行的话，是可以应用的，但是如果要指定多行进行删除时就不那么好用了，在网上游览了一天，总结出了一个可以自由指定行删除的方法！

下面的就是例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title></title>
    <script type="text/javascript">
        var tbs;
        function init(){//加载页面时得到tbody对象
            tbs = document.getElementById("tb");
        }