jquery 列表 jquery列表的增删和移动

jQuery，不仅可以以少量的代码做很多操作，而且兼容性好（各种浏览器，各种版本）。

下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作

1.jQuery代码

<script src="../Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>    
    <script type="text/javascript">
        //添加行
        function AddRow() {
            var newRowNumber = $("#tab1>tbody>tr").length+1;
            $("#tab1>tbody").append("<tr><td><input type='checkbox' name='dateItem' /></td><td>" + newRowNumber + "</td><td><input type='text' style='width:90%' /></td></tr>");
        }
        //删除行
        function DelRow() {
            var rowCount = $("#tab1>tbody>tr").length;
            var checkedCounts = $("input[type='checkbox'][name='dateItem']:checked").length;
            if (checkedCounts > 0 && checkedCounts != rowCount) {
                  $("input[type='checkbox'][name='dateItem']:checked").each(function () {
                      $(this).parents("tr").remove();
                   });
                   ResetOrder(); //刷新表序号
            }
            else if (checkedCounts == 0) {
               alert("请选择!");
            }
            else if(checkedCounts == rowCount) {
                alert("至少保留一行!");
            }
        }
        //刷新表序号
        function ResetOrder() {
            var rowCount = $("#tab1>tbody>tr").length;
            for(var i=0;i<rowCount;i++){
                $("#tab1>tbody>tr:eq("+i+")>td:eq(1)").html(i+1);
            }
         }
    </script>

2.html代码

<div class="table_toolbar">
                <a style="width: 50px; color: Blue" onclick="DelRow();">删除</a> 
                <astyle="width: 50px; color: Blue" onclick="AddRow();">添加</a>
            </div>
            <div class="table_box_data">
                <input type="hidden" id="hid" name="hid" />                
                 <table id="tab1">
                    <thead>
                        <tr>
                            <td width="30px"><input type="checkbox" id="cb_select" title="全选" /></td>
                            <td width="30px">序号</td>
                            <td>链接地址</td>
                        </tr>
                    </thead>
                     <tbody id="tbody"></tbody>
                    <tfoot><tr><td colspan="3"></td></tr></tfoot>
                </table>
            </div>

3.结果