您的位置:首页 > Web前端 > JQuery

jquery给table添加行

2016-10-27 00:00 113 查看
摘要: 1:获取table最后一行,2:准备数据,3,:添加数据,
注意: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();
});
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jqu table