JQuery實現(xiàn)表格動態(tài)增加行并對新行添加事件
更新時間：2014年07月30日 14:55:46 投稿：whsnow
JQuery實現(xiàn)表格動態(tài)增加行，一直保持最下面有多個空白行。這樣可以避免一次增加太多行可能導致頁面內(nèi)容太多，反應變慢
實現(xiàn)功能：
通常在編輯表格時表格的行數(shù)是不確定的，如果一次增加太多行可能導致頁面內(nèi)容太多，反應變慢；通過此程序實現(xiàn)表格動態(tài)增加行，一直保持最下面有多個空白行。
效果：
一：原始頁面
二：表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>
<div style="height:20px;"></div>
<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" />
//為表格主體添加單擊事件,當單擊時添加行數(shù),使表格保持有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]);
//如果有回調函數(shù)則執(zhí)行
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);
}
}
}
}
//在表格中指定位置插入指定行數(shù),新插入的行內(nèi)容為同一表格主體最后一行
//obj:行內(nèi)的任意對象
//n:要增加的行數(shù)
//bAutoRows:是否要添加自動增加行的屬性
$.fn.tableAutoRow.insertRow = function (obj, n, bAutoRows, isInsertAfter) {
var loop = 0; //加入循環(huán)次數(shù)，防止死循環(huán)
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);
}
}
}
//清除指定行數(shù)據(jù)
//obj為行或者行內(nèi)的節(jié)點
//startColnum:起始列
//endColumn:終止列
//isReset:是否恢復到初始值
$.fn.tableAutoRow.clearRowData = function (obj, startColnum, endColumn, isReset) {
var loop = 0; //加入循環(huán)次數(shù)，防止死循環(huán)
while (obj.tagName != "TR" && loop < 10) {
obj = obj.parentNode;
loop++;
}
if (obj.tagName != "TR") {
return;
}
var cellsCount = obj.cells.length; //此行單元格總數(shù)
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++) //循環(huán)各列,設置單元格里的控件值
{
for (var j = 0; j < obj.cells[c].childNodes.length; j++) { //循環(huán)處理指定單元格中的子節(jié)點
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實現(xiàn)表格行和列的動態(tài)添加與刪除方法【測試可用】
- 原生JS和JQuery動態(tài)添加、刪除表格行的方法
- JQuery動態(tài)添加和刪除表格行的方法
- 基于jQuery的動態(tài)表格插件
- 基于jquery的動態(tài)創(chuàng)建表格的插件
- JQuery Ajax動態(tài)生成Table表格
- Jquery 動態(tài)循環(huán)輸出表格具體方法
- jquery動態(tài)增加刪除表格行的小例子
- jQuery實現(xiàn)html表格動態(tài)添加新行的方法
- Jquery 動態(tài)生成表格示例代碼
- jQuery實現(xiàn)的簡單動態(tài)添加、刪除表格功能示例
相關文章
這篇文章主要介紹了jQuery控制Div拖拽效果完整實例,對jQuery控制拖拽效果的方法以注釋形式給予了較為詳細的介紹,便于讀者理解代碼含義,需要的朋友可以參考下2015-04-04
Query常用DIV操作獲取和設置長度寬度的實現(xiàn)方法
下面小編就為大家?guī)硪黄猀uery常用DIV操作獲取和設置長度寬度的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
JQuery使用index方法獲取Jquery對象數(shù)組下標的方法
這篇文章主要介紹了JQuery使用index方法獲取Jquery對象數(shù)組下標的方法,涉及jQuery中index方法的使用技巧,需要的朋友可以參考下2015-05-05
在WinForm程序開發(fā)中，經(jīng)常用MessageBox彈出某些提示，功能雖簡單但卻非常的實用！而在Web頁面中，瀏覽器也提供了Alert或Confirm等腳本語句用于彈出提示窗口2009-12-12
jQuery支持帶命名空間的事件,這樣就可以方便地對同一事件使用不同的監(jiān)聽器并進行管理,接下來我們就以實例講解jQuery中對事件的命名空間的運用2016-05-05![40個新鮮出爐的jQuery 插件和免費教程[上]](http://img.jbzj.com/images/xgimg/bcimg5.png)
作為最流行的 JavaScript 庫，jQuery 擁有豐富的插件，能夠幫助開發(fā)者簡單快速的實現(xiàn)各種功能2012-07-07
這篇文章主要介紹了用jquery實現(xiàn)可輸入多選下拉組合框的實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
花了幾個小時用jqury寫的分頁效果實現(xiàn)，功能基本實現(xiàn)需要再封裝下 呵呵～～2009-11-11
判斷對象是否Window的實現(xiàn)代碼，需要的朋友可以參考下。2012-01-01
本文給大家分享一段jquery代碼實現(xiàn)滑動按鈕開關的效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的的朋友參考下2016-12-12