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"onclick="deltr(this)">删除</button></td></tr>‘)
11       }
12    });
13 });
14 //删除行的函数,必须要放domready函数外面
15 function deltr(delbtn){    17     $(delbtn).parents("tr").remove();
23 };

 

 

  

jquery实现<body>中点击按钮后,在<tbody>中显示一连串文本框,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。