jQuery 动态实现表格添加一行，删除一行且第一行不能删除_jquery 表格第一行不允许删除-优快云博客

本文链接：https://blog.youkuaiyun.com/bobo0425/article/details/80054334

本文展示了如何使用jQuery动态地在表格中添加和删除行。特别地，第一行被设置为不可删除，以确保基本数据的完整性。通过结合CSS样式，实现了交互式的用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table_add.html</title>
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
            border:0;
        }
        table{
            width: 800px;
            margin: 20px auto;
            border-collapse: collapse;
       }
        table tr:nth-child(odd){
            background-color: #FFFACD;
        }
        table tr:nth-child(even){
            background-color:#AFEEEE;
        }
        table tr td{
            border: 2px solid rosybrown;
            height:32px;
        }
        #addrow,#detrow{
            display: block;
            line-height: 40px;
            font-family: "Arial Black";
            background: #808000;
            width:100px;
            margin:20px auto;
            border:2px solid black;
            box-shadow: 3px 3px 5px #b9b9b9;
            float: left;
        }
        #detrow{
            margin-left: 20px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#addrow").click(function () {
                $("tr:last-child").clone().appendTo("table");
            });
            $("#detrow").click(function () {
                var index = $("tr:last-child").index();
                if(index>0){
                    $("tr:last-child").remove();
                }else{
                    alert("表格第一行不能删除！");
                    return false;
                }

                //$("table tr:not(:first):last").remove();
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <input type="button" id="addrow" value="增加一行"/>
    <input type="button" id="detrow" value="删除一行"/>
</body>
</html>

效果图: