这次给大家带来jquery动态操作表行并对新行添加事件，jquery动态操作表行并对新行添加事件的注意事项有哪些，下面就是实战案例，一起来看一下。实现功能：
通常在编辑表格时表格的行数是不确定的，如果一次增加太多行可能导致页面内容太多，反应变慢；通过此程序实现表格动态增加行，一直保持最下面有多个空白行。
效果：
一：原始页面
二：表1增加新行并绑定timepicker
三：表2自动增加行，新行绑定timepicker
html源码：
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<link href="../script/jquery-easyui-1.3.2/themes/default/easyui.css" rel="external nofollow" rel="stylesheet" />
<style>
.autorows{
width: 350px; border:1px green solid;
}
.autorows tbody tr td{
border-bottom:1px green solid;
margin:0px;
}
.autorows thead{
background-color:#8ec7d7;
}
.autorows tfoot {
background-color: #8ec7d7;
}
</style>
</head>
<body>
<table border="0" cellspacing="0" id="table1" class="autorows">
<thead>
<tr>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
</tr>
<tr>
<th>表头2</th>
<th>表头2</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="button1" type="button" value="insertafter" onclick="addrow(this);" /></td>
<td>
<input id="button3" type="button" value="clear" onclick="$.fn.tableautorow.clearrowdata(this, 2, 2, false);" /></td>
<td>
<input id="text2" type="text" value="aaaa" /></td>
</tr>
<tr>
<td>
<input id="button2" type="button" value="insertbefore" onclick="$.fn.tableautorow.insertrow(this,1,true,false);" /></td>
<td>
<input id="button4" type="button" value="reset" onclick="$.fn.tableautorow.clearrowdata(this, 2, 2, true);" /></td>
<td>
<input id="text1" name="ttt" type="text" value="asdfasfasfdsd" /></td>
</tr>
<tr>
<td>
<input id="button5" type="button" value="insertbefore" onclick="$.fn.tableautorow.insertrow(this,1,true,false);" /></td>
<td>
<input id="button6" type="button" value="reset" onclick="$.fn.tableautorow.clearrowdata(this, 2, 2, true);" /></td>
<td>
<input id="text3" type="text" name="text3" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>表尾1</th>
<th>表尾2</th>
<th>表尾3</th>
</tr>
</tfoot>
</table>
<p style="height:20px;"></p>
<table border="0" cellspacing="0" id="table2" class="autorows">
<thead>
<tr>
<th>表头1</th>
<th>表头1</th>
<th>表头1</th>
</tr>
<tr>
<th>表头2</th>
<th>表头2</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="button7" type="button" value="insertafter" onclick="addrow(this);" /></td>
<td>
<input id="button8" type="button" value="clear" onclick="$.fn.tableautorow.clearrowdata(this, 2, 2, false);" /></td>
<td>
<input id="text4" type="text" value="aaaa" /></td>
</tr>
<tr>
<td>
<input id="button9" type="button" value="insertbefore" onclick="$.fn.tableautorow.insertrow(this, 1, true, false);" /></td>
<td>
<input id="button10" type="button" value="reset" onclick="$.fn.tableautorow.clearrowdata(this, 2, 2, true);" /></td>
<td>
<input id="text5" name="ttt" type="text" value="asdfasfasfdsd" /></td>
</tr>
<tr>
<td>
<input id="button11" type="button" value="insertbefore" onclick="$.fn.tableautorow.insertrow(this, 1, true, false);" /></td>
<td>
<input id="button12" type="button" value="reset" onclick="$.fn.tableautorow.clearrowdata(this, 2, 2, true);" /></td>
<td>
<input id="text6" type="text" name="text3" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>表尾1</th>
<th>表尾2</th>
<th>表尾3</th>
</tr>
</tfoot>
</table>
</body>
</html>
<script src="../script/jquery-1.7.2.min.js"></script>
<script src="../script/jquery.tableautorow.js"></script>
<script src="../script/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script src="../script/jquery.timepicker.js"></script>
<script type="text/javascript">
$(function () {
$(.autorows).tableautorow(aaa);
function aaa(row) {
$(row).find(':text').timepicker();
}
});
function addrow(obj) {
$.fn.tableautorow.insertrow(obj);
}
</script>
js源码：
/// <reference path="jquery-1.7.2.min.js" />
//为表格主体添加单击事件,当单击时添加行数,使表格保持有n个空行
(function ($) {
$.fn.extend({
rowfunction: null,
tableautorow: function (newrowfunction) {
rowfunction = newrowfunction;
return $(this).each(function () {
var tb = this;
if (!(this.tagname.touppercase() == tbody)) {
if (!this.tbodies[0]) {
return;
} else {
tb = this.tbodies[0];
}
}
//添加一个隐藏行，后面新增行复制此行
var lastrow = tb.rows[tb.rows.length - 1];
var row = $(lastrow).clone(true, true);
$(row).insertafter($(tb).find(tr:last)).hide();
//为除所有行添加事件，当获得焦点时自动增加新行
for (var i = 0; i < tb.rows.length; i++) {
addautorowsevent(tb.rows[i]);
}
});
}
});
//自动增加行
function autorows(e) {
var e = e || event;
var obj = e.target || e.srcelement;
while (obj.tagname != "tr") {
obj = obj.parentnode;
}
var tb = obj.parentnode;
var index = $(obj).index();
var n = 5 - (tb.rows.length - index);
if (n > 0) {
var lastrow = tb.rows[tb.rows.length - 1];
for (var j = 0; j < n; j++) {
var row = $(lastrow).clone(true, true);
//将新行添加到最后一行之前
row.insertbefore($(tb).find("tr:last")).show();
//为新增加的行添加事件
//addautorowsevent(tb.rows[tb.rows.length - 2]);
//如果有回调函数则执行
if (typeof (rowfunction) == 'function') {
rowfunction(row);
}
}
}
}
//为指定行增加事件
function addautorowsevent(tr) {
//如果是jquery对象则转为html对象
if (tr instanceof jquery) {
tr = tr[0];
}
$(tr).bind('click', autorows);
var c = tr.cells.length;
for (var j = 0; j < c; j++) {
var childs = tr.cells[j].childnodes;
for (var k = 0; k < childs.length; k++) {
if (childs[k].type == "text" || childs[k].type == "textarea" || childs[k].type == "button") {
$(childs[k]).bind('focus', autorows);
}
}
}
}
//在表格中指定位置插入指定行数,新插入的行内容为同一表格主体最后一行
//obj:行内的任意对象
//n:要增加的行数
//bautorows:是否要添加自动增加行的属性
$.fn.tableautorow.insertrow = function (obj, n, bautorows, isinsertafter) {
var loop = 0; //加入循环次数，防止死循环
while (obj.tagname != "tr" && loop < 10) {
obj = obj.parentnode;
loop++;
}
if (obj.tagname != "tr") {
return;
}
var tb = obj.parentnode;
switch (arguments.length) {
case 3:
var isinsertafter = true;
case 2:
var bautorows = true;
var isinsertafter = true;
case 1:
var bautorows = true;
var isinsertafter = true;
var n = 1;
}
for (var i = 0; i < n; i++) {
var lastrow = tb.rows[tb.rows.length - 1];
var row = $(lastrow).clone(true, true);
//将新行添加到当前行之前/后
if (isinsertafter) {
row.insertafter(obj).show();
} else {
row.insertbefore(obj).show();
}
if (bautorows) {
addautorowsevent(row);
}
}
}
//清除指定行数据
//obj为行或者行内的节点
//startcolnum:起始列
//endcolumn:终止列
//isreset:是否恢复到初始值
$.fn.tableautorow.clearrowdata = function (obj, startcolnum, endcolumn, isreset) {
var loop = 0; //加入循环次数，防止死循环
while (obj.tagname != "tr" && loop < 10) {
obj = obj.parentnode;
loop++;
}
if (obj.tagname != "tr") {
return;
}
var cellscount = obj.cells.length; //此行单元格总数
if (startcolnum < 0 || !startcolnum) { //如果未指定清除起始列则从第一列清除
startcolnum = 0;
}
if (endcolumn > cellscount - 1 || !endcolumn) { //如果未指定清除终止列则清除到最后一列前(通常最后一列用于放置清除按钮)
endcolumn = cellscount - 1;
}
if (isreset == undefined) {
isreset = false;
}
for (var c = startcolnum; c <= endcolumn; c++) //循环各列,设置单元格里的控件值
{
for (var j = 0; j < obj.cells[c].childnodes.length; j++) { //循环处理指定单元格中的子节点
var node = obj.cells[c].childnodes[j];
setobjdata(node, isreset);
}
}
};
function setobjdata(node, isreset) {
switch (node.type) {
case "text":
case "hidden":
case "textarea":
if (isreset) {
node.value = node.defaultvalue;
} else {
node.value = "";
}
break;
case "select-one":
case "select-multiple":
if (isreset) {
for (var k = node.options.length - 1; k >= 0; k--) {
node.options[k].selected = node.options[k].defaultselected;
}
} else {
for (var k = node.options.length - 1; k >= 0; k--) {
//node.options.remove(k);
node.options[k].selected = false;
}
}
break;
case checkbox:
case radio:
if (isreset) {
node.checked = node.defaultchecked;
} else {
node.checked = false;
}
break;
}
if (node.childnodes && node.childnodes.length > 0) {
var l = node.childnodes.length;
for (var i = 0; i < l; i++) {
setobjdata(node.childnodes[i], isreset);
}
}
}
})(jquery);
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery+ajax动态生成table步骤详解
jquery过滤方法filter()使用详解
以上就是jquery动态操作表行并对新行添加事件的详细内容。