基于jQuery表格增加删除代码示例

转载

mob604756f2af3b 2016-03-25 13:31:00

文章标签 html javascript jquery i++ 代码示例 文章分类 代码人生

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基于jQuery表格增加删除代码示例</title>
    <script type="text/javascript" src="./2.1.js"></script>
     
     <script type="text/javascript">
        $(function () {
            var show_count = 20;   //要显示的条数
            var count = 1;    //递增的开始值，这里是你的ID
            $("#btn_addtr").click(function () {

                var length = $("#dynamicTable tbody tr").length;
                //alert(length);
                if (length < show_count)    //点击时候，如果当前的数字小于递增结束的条件
                { 
                    // alert($("#tab11 tbody tr").clone());

                    /**
                    *clone([Even[,deepEven]])
                      *   概                  述
                      *  克隆匹配的DOM元素并且选中这些克隆的副本。
                     *  在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用
                    
                    */
                    $("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody");   //在表格后面添加一行
                    changeIndex();//更新行号
                }
            });


        });
        function changeIndex() {
            var i = 1;
            $("#dynamicTable tbody tr").each(function () { //循环tab tbody下的tr
                $(this).find("input[name='NO']").val(i++);//更新行号
            });
        }

        function deltr(opp) {
            // alert($(opp).val());
            // alert(opp);  //jQuery 对象
            var length = $("#dynamicTable tbody tr").length;
            //alert(length);
            if (length <= 1) {
                alert("至少保留一行");
            } else {
                // alert($(opp).parent());
                // alert($(opp).parent().parent());
                //  ==========  1 ===========
                // $(opp).remove();//移除当前行 删除当前的元素 input
                // <input type="button" id="Button2" onclick="deltr(this)" value="删行" />
                //============  2 =====================================================
                 // $(opp).parent().remove();//移除当前 td
                 //<td><input type="button" id="Button1" onclick="deltr(this)" value="删行" /></td>
                 //============  3 ===============================================================
                  $(opp).parent().parent().remove();//移除当前行 tr
                  /**
                <tr>

                <td height="30" align="center">
                <input type="text" name="NO" size="2" value="1" />
                </td>
                <td align="center">
                <input type="text" name="start_end_time" />
                </td>
                <td align="center">
                <input type="text" name="unit_department" />
                </td>
                <td align="center">
                <input type="text" name="post" />
                </td>
                <td>
                <input type="button" id="Button1" onclick="deltr(this)" value="删行" />
                </td>

                </tr>
                  */
                changeIndex();
            }
        }
    </script>

     
</head>
<body>

    <div style="width:720px;margin:20px auto;">
        <!-- 作为隐藏 clone start -->
        <table id="tab11" style="display: none;border:0px solid red;">
        <tbody>

        <tr>

        <td height="30" align="center">
        <input type="text" name="NO" size="2" value="1" />
        </td>
        <td align="center">
        <input type="text" name="start_end_time" />
        </td>
        <td align="center">
        <input type="text" name="unit_department" />
        </td>
        <td align="center">
        <input type="text" name="post" />
        </td>
        <td>
        <input type="button" id="Button1" onclick="deltr(this)" value="删行" />
        </td>

        </tr>


        </tbody>

        </table>
       <!-- 作为隐藏 clone end-->

        <input type="button" id="btn_addtr" value="增行" />
        <table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
        <td height="30" align="center" bgcolor="#CCCCCC">ID</td>
        <td align="center" bgcolor="#CCCCCC">起止时间</td>
        <td align="center" bgcolor="#CCCCCC">单位/部门</td>
        <td align="center" bgcolor="#CCCCCC">职位</td>
        <td></td>
        </tr>
        </thead>
        <tbody>
        <tr>

        <td height="30" align="center">
        <input type="text" name="NO" size="2" value="1" />
        </td>

        <td align="center">
        <input type="text" name="start_end_time" />
        </td>

        <td align="center">
        <input type="text" name="unit_department" />
        </td>

        <td align="center">
        <input type="text" name="post" />
        </td>

        <td>
        <input type="button" id="Button2" onclick="deltr(this)" value="删行" />
        </td>

        </tr>
        </tbody>
        </table>
    </div>

</body>
</html>