jquery实现<body>中点击按钮后,在<tbody>中显示一连串文本框

HTML中的代码如下:

 1 <div   style="background:#fff;border-style:solid; border-width:1px 1px 0 1px;border-color:#B8D0D6;">
 2             <div >
 3               <div style="margin:-6px 0 0 0">
 4                 <button  class="button gray" type="button"id="addButton">添加坐标</button>
 5                 <input type="text" name="dwz_rowNum" class="textInput" id="count"  value="1" >
 6               </div> 
 7             </div>            
 8             <table class="list nowrap "id="table" width="100%">
 9             <thead>
10               <tr>
11                 <th width="20%"size="18" >ID</th>
12                 <th width="20%"size="18" >X轴坐标</th>
13                 <th width="20%"size="18" >Y轴坐标</th>
14                 <th width="20%"size="18" >备注</th>
15                 <th width="20%"size="18" >操作</th>
16               </tr>
17             </thead>
18            
19             <tbody>
20               
29             </tbody>
30           </table>
31         </div>

jquery代码如下:

 2 jQuery(function($){
 3    //添加行   5     $("#addButton").click(function(){     9       for(var i=1;i<=$("#count")[0].value;i++){
10         $("#table>tbody").append('<tr><td width="20%"><input name="items.order_id[]" type="text"size="20" value=""></input></td><td width="20%"><input name="items.x_coordinates[]" type="text" value=""></input></td><td width="20%"><inputname="items.y_coordinates[]" type="text" value=""></input></td><td width="20%"><input name="items.remark[]" type="text" value=""></input></td><td width="20%"><button class="btnDel"οnclick="deltr(this)">删除</button></td></tr>')
11       }
12    });
13 });
14 //删除行的函数,必须要放domready函数外面
15 function deltr(delbtn){    17     $(delbtn).parents("tr").remove();
23 };

 

 

  

转载于:https://www.cnblogs.com/antik/p/3919388.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值