jQuery动态添加、删除表格行

本文介绍使用jQuery实现表格行的动态添加与删除功能,包括全选/取消全选操作,并附带具体代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 jQuery实现动态添加或删除表格行特效,每点击一次添加,会添加一个表格单元格,点击删除会删掉所有行

CSS:

<style type="text/css">
        #tb{
            margin: 3% 0 0 5%
        }
        #tb td{
            text-align: center;
            font-weight: bold;
            background-color: #F2F4FF;
            border: 1px solid #F2F4FF;
        }
 </style>

SCRIPT:

<script type="text/javascript" src="jquery-1.4.4.min.js"></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>

HTML:

<form id="form1">
    <div>
        <table id="tb" style="border:1px solid #C0C0C0;">
           <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>

 

转自:http://mzgnc.blog.163.com/blog/static/7653512010112853658925/

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值