这次给大家带来jquery动态操作表格行，jquery动态操作表格行的注意事项有哪些，下面就是实战案例，一起来看一下。
具体代码如下：
html代码：
<p style="width:720px;margin:20px auto;">
<table id="tab11" style="display: none">
<tbody>
<tr>
<td height="30" align="center">
<input type="text" name="no" size="2" value="1" />
</td>
<td align="center">
<input type="text" name="start_end_time" />
</td>
<td align="center">
<input type="text" name="unit_department" />
</td>
<td align="center">
<input type="text" name="post" />
</td>
<td>
<input type="button" id="button1" onclick="deltr(this)" value="删行" />
</td>
</tr>
</tbody>
</table>
<input type="button" id="btn_addtr" value="增行" />
<table id="dynamictable" width="700" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td height="30" align="center" bgcolor="#cccccc">id</td>
<td align="center" bgcolor="#cccccc">起止时间</td>
<td align="center" bgcolor="#cccccc">单位/部门</td>
<td align="center" bgcolor="#cccccc">职位</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td height="30" align="center">
<input type="text" name="no" size="2" value="1" />
</td>
<td align="center">
<input type="text" name="start_end_time" />
</td>
<td align="center">
<input type="text" name="unit_department" />
</td>
<td align="center">
<input type="text" name="post" />
</td>
<td>
<input type="button" id="button2" onclick="deltr(this)" value="删行" />
</td>
</tr>
</tbody>
</table>
</p>
js代码：
$(function () {
var show_count = 20; //要显示的条数
var count = 1; //递增的开始值，这里是你的id
$(#btn_addtr).click(function () {
var length = $(#dynamictable tbody tr).length;
//alert(length);
if (length < show_count) //点击时候，如果当前的数字小于递增结束的条件
{
$(#tab11 tbody tr).clone().appendto(#dynamictable tbody); //在表格后面添加一行
changeindex();//更新行号
}
});
});
function changeindex() {
var i = 1;
$(#dynamictable tbody tr).each(function () { //循环tab tbody下的tr
$(this).find(input[name='no']).val(i++);//更新行号
});
}
function deltr(opp) {
var length = $(#dynamictable tbody tr).length;
//alert(length);
if (length <= 1) {
alert(至少保留一行);
} else {
$(opp).parent().parent().remove();//移除当前行
changeindex();
}
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
grep()方法实现数组过滤筛选
jquery解析json字符串json数组步骤详解（附代码）
以上就是jquery动态操作表格行的详细内容。