jquery动态增加减少行

本文介绍了一种使用jQuery实现动态表格增删功能的方法。通过点击按钮可以增加或删除表格行,并保持至少一行数据,适用于需要灵活管理表格数据的场景。

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

<input type="button" value="增加" onclick="addNew();"> 
<input type="button" value="删除" onclick="del();"> 

<table id="table1" cellspacing="3" cellpadding="3" > 

<tbody> 
    <b>姓名</b><input type='text'  name='name' id=1 />
    <b>手机</b><input type='text'  name='phone' id=1 />
   
</tbody> 

</table> 


jquery引用jquery-1.7.1.js

<script > 
    var row_count = 1; 
    function addNew() 
    { 
        var table1 = $('#table1'); 
        var firstTr = table1.find('tbody>tr:first'); 
        var row = $("<tr></tr>"); 
        var td = $("<td></td>");  
        td.append($("<b>姓名</b><input type='text'  name='name' id=" + (row_count +1) +" value=''>"));
        td.append($("<b>手机</b><input type='text'  name='phone' id=" + (row_count +1)+ " value=''>"));
        row.append(td); 
        table1.append(row);
        row_count++; 
    } 
    function del() 
    { 
        var checked = $("input[type='text'][id="+(row_count)+"]");
       
        if (row_count < 2) {
            alert("最少预订一个人");
            return;
        }
        $(checked).each(function(){ 
                $(this).parent().parent().remove(); 
        });
        row_count--;
    } 
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值