jquery给table添加行
2016-10-27 00:00
113 查看
摘要: 1:获取table最后一行,2:准备数据,3,:添加数据,
注意:table的tr是从0开始的
html代码
js//动态添加行:
删除的js代码
注意:table的tr是从0开始的
html代码
<!-- 表格 --> <div class="table-radius-top" style="width: 95%;margin-left: 2%;margin-top: 2%;"> <div class="inline-block pr15" style="width: 5%; clear: both;margin-top: 4%;"></div> <input type="button" class="btn btn-primary" onclick="btn_delete()" name="" value="删除"/> <input type="button" class="btn btn-primary" onclick="btn_add()" name="" value="新增"/> <input type="button" class="btn btn-primary" onclick="btn_order_add()" name="" value="按订单新增"/> <table class="table table-hover table-radius-bordered" id="planTable" style="table-layout:fixed;"> <tr id="0" align="center" bgcolor="#66CCCC" onMouseOver=""> <td width="6%">选择</td> <td width="17%">订单号</td> <td width="15%">应用名称</td> <td width="15%">应用ID</td> <td width="47%">投诉应用涉及AP名称</td> <td width="47%">AP代码</td> <td width="100%">订购发生时间</td> <td width="47%">订购途径</td> <td width="47%">订购金额</td> </tr> <tr align="center"> <td> <input type="checkbox" name="chk0"> </td> <!-- 订单号 --> <td> <input name="orderId" type="text" size="8"> </td> <!-- 应用名称 --> <td> <input name="iappname" placeholder='不超过25个汉字!' type="text" size="8"> </td> <!-- 应用id --> <td> <input name="appContent" type="text" size="8"> </td> <!-- 投诉应用涉及AP名称 --> <td> <input name="iapname" type="text" size="8"> </td> <!-- AP代码 --> <td> <input name="companyCode" type="text" size="8"> </td> <!-- 订购发生时间 --> <td> <input name="companyCode" type="text" size="8"> </td> <!-- 订购途径 --> <td> <input name="companyCode" type="text" size="8"> </td> <!-- 订购金额 --> <td> <input name="ifee" type="text" size="8"> </td> </tr> </table> </div>
js//动态添加行:
//动态添加行 function btn_add(){ var rows = $("#planTable tr").length; var rows = rows-1; var tr = "<tr id="+rows+" align='center'>" +"<td><input type='checkbox' name='chk0'>"+rows+"</td>" +"<td><input name='orderId' type='text' size='8'></td>" +"<td><input name='iappname' placeholder='不超过25个汉字!' type='text' size='8'></td>" +"<td><input name='appContent' type='text' size='8'></td>" +"<td><input name='iapname' type='text' size='8'></td>" +"<td><input name='companyCode' type='text' size='8'></td>" +"<td><input name='companyCode' type='text' size='8'></td>" +"<td><input name='ifee' type='text' size='8'></td>" +"<td><input name='ifee' type='text' size='8'></td>" +"</tr>"; $("#planTable tr:eq("+rows+")").after(tr); }
删除的js代码
//删除选择的行 function btn_delete(){ var ckbs=$("input:checked"); if(ckbs.size()==0){ alert("要删除指定行,需选中要删除的行!"); return; } ckbs.each(function(){ $(this).parent().parent().remove(); }); }
相关文章推荐
- Jquery实现的table最后一行添加样式的代码
- jquery 动态添加table中的tr
- jquery的table操作之在指定行后添加新行
- 利用jquery给指定的table动态添加一行、删除一行
- Jquery html<table>数据行的添加和删除
- [jQuery] 为table各行添加不同颜色的class
- jquery 为 Table 添加样式
- JQuery动态为表格(Table)添加和删除行
- 使用jquery在table指定行后添加新行
- jquery应用实例一动态添加删除生成表格table
- jquery 删除动态添加到table中的tr
- JQuery动态table添加行删除行
- Jquery实现table行数的增加,删除,实现指定行数的添加等应用~~~~!!!!
- jquery动态对table添加TD
- 使用jquery在table指定行后添加新行
- jQuery给table添加行和删除行
- 使用jquery为table动态添加行的实现代码
- jquery实现自动添加table表格及内容
- Jquery 去掉样式一样table的第一行和除第一列之外的其他列,给td 添加样式
- 利用jquery给指定的table动态添加一行、删除一行