jQuery 动态实现表格添加一行，删除一行且第一行不能删除

<!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>

效果图:

jQuery 动态实现表格添加一行，删除一行且第一行不能删除

相关推荐