从HTML表格删除行

最新推荐文章于 2023-02-12 16:47:59 发布

xiantouxu

最新推荐文章于 2023-02-12 16:47:59 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签： html 元素

本文链接：https://blog.csdn.net/xiantouxu/article/details/77417003

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

问题：想要从一个HTML表格删除行
解决方案：可以在一个HTML表格行上使用removeChild()方法，并且所有的子元素都将被删除。

<!DOCTYPE html>
<html>
<head>
    <title>Adding and Removing Elements</title>
    <style type="text/css">
    /*  separate    默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
        collapse    如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
        inherit 规定应该从父元素继承 border-collapse 属性的值。*/
        table{
            border-collapse: collapse;

        }
        td,th{
            padding: 5px;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
<table id="mixed">
    <tr>
        <th>Value one</th>
        <th>Value two</th>
        <th>Value three</th>
    </tr>
</table>    
<div id="result"></div>
<script type="text/javascript">
//二维数组
var values = new Array(3);
values[0] = [123.5,"apple",true];
values[1] = [65,"banana",false];
values[2] = [1034.99,"cherry",false];

var mixed = document.getElementById("mixed");
var tbody = document.createElement("tbody");
for(var i =0;i<values.length;i++){
    var tr = document.createElement("tr");
    for(var j = 0;j<values.length;j++){
        var td = document.createElement("td");
        var txt = document.createTextNode(values[i][j]);
        td.appendChild(txt);
        tr.appendChild(td);
    }
    tr.onclick = prunerow;
    tbody.appendChild(tr);
    mixed.appendChild(tbody);
}
function prunerow(){
    var parent = this.parentNode;//tbody
    var oldrow = parent.removeChild(this);
    //删除来自行的数据
    var datastring = "";
    for(var i =0;i<oldrow.childNodes.length;i++){
        var cell =oldrow.childNodes[i];
        datastring+=cell.firstChild.data;+" ";
    }

    //输出消息
    var msg = document.createTextNode("remove: "+datastring);
    var p = document.createElement("p");
    p.appendChild(msg);
    document.getElementById("result").appendChild(p);
}

</script>
</body>
</html>

其中复习一下 border-collapse属性

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing和empty-cells属性
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells
inherit	规定应该从父元素继承 border-collapse

append()和appendChild()的区别：
parentNode.append()可以同时传入多个节点或字符串，没有返回值；
而parentNode.appendChild()只能传一个节点，且不直接支持传字符串(需要parentNode.appendChild(document.createTextElement(‘字符串’))代替)，返回追加的Node节点