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