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

浏览数：36 / 时间：2015年06月09日

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 };