jqeury 动态删除、添加表格demo -

vinceyu

浏览: 119534 次
性别:
来自: 沈阳

最近访客更多访客>>

warcraft32

jiqingsuiyue

胡兴根

qq85609655

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jqeury 动态删除、添加表格demo

CSS jQuery JavaScript XHTML HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>download by http://www.codefans.net</title>
    <link href="App_Files/CSS/default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #tb .td{
            text-align: center;
            font-weight: bold;
            background-color: #6699FF;
            color: #FFFFFF;
            border:1px solid #000;
        }
    </style>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            //隐藏模板tr
            $("#tb tr").eq(2).hide();
            var i = 0;
            $("#BtAdd").click(function() {
　　　　　//复制一行
                var tr = $("#tb tr").eq(2).clone();
                tr.find("td").get(0).innerHTML = ++i;
                tr.show();
                tr.appendTo("#tb");
            });
            $("#BtDel").click(function() {
                $("#tb tr:gt(2)").each(function() {
                    if ($(this).find("#CK").get(0).checked == true) {
                        $(this).remove();
                    }
                });
                i = 0;
                $("#tb tr:gt(2)").each(function() {
                    $(this).find("td").get(0).innerHTML = ++i;
                });
                $("#CKA").attr("checked", false);
            });
            $("#CKA").click(function() {
                $("#tb tr:gt(2)").each(function() {
                    $(this).find("#CK").get(0).checked = $("#CKA").get(0).checked;
                });
            });
        })
    </script>
</head>
<body>
    <form id="form1">
    <div>
        <table id="tb" style="border:1px solid #000;">
           <tr>
                <td colspan="10" style="text-align:right">
                    <input id="BtAdd" type="button" value="添加" />&nbsp;<input id="BtDel" type="button" value="删除" /></td>
            </tr>
            <tr>
                <td style="width:25px;"></td>
                <td style="width:25px;">
                    <input id="CKA" name="CKA" type="checkbox"/></td>
                <td style="width:20%;">
                    字段名</td>
                <td style="width:20%;">
                    名称</td>
                <td style="width:15%;">
                    数据类型</td>
                <td style="width:40px;">
                    主键</td>
                <td style="width:40px;">
                    必填</td>
                <td style="width:20%;">
                    长度</td>
                <td style="width:40px;">
                    有效</td>
                <td style="width:80px;">
                    排序</td>
            </tr>
            <tr>
                <td style="text-align: center"></td>
                <td style="text-align: center">
                    <input id="CK" type="checkbox" name="CK"/></td>
                <td style="text-align: center">
                    <input id="TName" type="text" name="TName" /></td>
                <td style="text-align: center">
                    <input id="TRm" type="text" name="TRm" /></td>
                <td style="text-align: center">
                    <select id="SType" name="SType" style=" width:100px;">
                        <option>1</option>
                        <option>2</option>
                    </select></td>
                <td style="text-align: center">
                    <input id="CKIsPR" type="checkbox" name="CKIsPR"/></td>
                <td style="text-align: center">
                    <input id="CKIsNull" type="checkbox" name="CKIsNull"/></td>
                <td style="text-align: center">
                    <input id="TLen" type="text" size="10" name="TLen" /></td>
                <td style="text-align: center">
                    <input id="CKIsUse" type="checkbox" checked="checked" name="CKIsUse"/></td>
                <td style="text-align: center">
                    <input id="TxtSortNO" type="text" size="4" name="TxtSortNO" /></td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

jquery.rar (18.8 KB)
下载次数: 15

分享到：