超好用的删除行tr js代码_js删除tr整行-优快云博客

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现了表格中行的删除功能。通过点击每行中的“删除该行”链接，可以弹窗确认后移除对应的表格行。此示例适用于初学者了解DOM操作。

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type"
 content="text/html; charset=utf-8"/>

    <title></title>

    <style type="text/css">

        td{

            height:30px;

            width:40px;

            background-color:saddlebrown;

        }

    </style>

    <script type="text/javascript">

        function
 DeleteRow(id)

        {

            if(window.confirm("是否删除这一行？"+id))

            {

                //新手上路还是把这一行代码拆开来写更容易理解

                document.getElementById(id).parentNode.removeChild(document.getElementById(id));

             //
 找到 id为传进来的参数的节点  的父节点   删除父节点中的      当前节点

                //tr的父节点是
 tbody哦

            }

        }

    </script>

</head>

<body>

    <table>

        <tr id="row1">

            <td>1</td><td><a href="javascript:DeleteRow('row1')">删除该行</a></td>

        </tr>

        <tr id="row2">

            <td>2</td><td><a href="javascript:DeleteRow('row2')">删除该行</a></td>

        </tr>

        <tr id="row3">

            <td>3</td><td><a href="javascript:DeleteRow('row3')">删除该行</a></td>

        </tr>

        <tr id="row4">

            <td>4</td><td><a href="javascript:DeleteRow('row4')">删除该行</a></td>

        </tr>

    </table>

</body>

</html>