首页 > 代码库 > jquery实现<body>中点击按钮后，在<tbody>中显示一连串文本框
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 };
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。