JavaScript操作表格

最新推荐文章于 2022-05-15 23:36:14 发布

u013131203

最新推荐文章于 2022-05-15 23:36:14 发布

阅读量432

点赞数

分类专栏： JavaScript 文章标签： JavaScript CSS html

本文链接：https://blog.csdn.net/u013131203/article/details/53667022

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Adding and Removing Elements</title>
    <style>
        table{
            border-collapse: collapse;
        }
        td,th{
            padding: 5px;
            border: 1px solid #cccccc;
        }
        /*奇数行*/
        tr:nth-child(2n+1){
            background-color: #eeffee;
        }
        /*偶数行*/
        tr:nth-child(2n){
            background-color: #8843ff;
        }
    </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>
<div>
    <h3>从HTML表格删除行</h3>
    <h5>添加并删除表格行及其相关单元格和数据</h5>
</div>
<script>
    var values = new Array(6);
    values[0] = [123.45,"apple",true];
    values[1] = [65,"bababa",false];
    values[2] = [1034.99,"cherry",false];
    values[3] = [534.99,"shawn",false];
    values[4] = [10.99,"Khea",false];
    values[5] = [164.99,"Todd",false];

    var mixed = document.getElementById("mixed");
    var tbody = document.createElement("tbody");  //创建一个元素

    //针对每个外围数组行
    for(var i = 0; i < values.length; i++){
        var tr = document.createElement("tr");

        //针对每个内部数组单元格，创建td, 然后附加文本
        for(var j = 0; j < values[i].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;//获取单元格的行
        var oldrow = parent.removeChild(this);  //删除行

        //来自删除行的数据的dataString
        var dataString = "";
        /**
         * 取出行中的数据
         */
        for(var i = 0; i < oldrow.childNodes.length; i++){
            var cell = oldrow.childNodes[i];
            console.log(cell);
            dataString += cell.firstChild.data + " ";
        }

        //输出消息
        var msg = document.createTextNode("removed " + dataString);
        var p = document.createElement("p");
        p.appendChild(msg);
        document.getElementById("result").appendChild(p);
    }
</script>
</body>
</html>

u013131203

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作表格

html>html lang="en">head> meta charset="UTF-8"> title>Adding and Removing Elementstitle> style> table{ border-collapse: collapse; } td,th{
复制链接

扫一扫

专栏目录