首頁 > 開發者 > JavaScript
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> <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" /> //為表格主體添加單擊事件,當單擊時添加行數,使表格保持有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);
datatable如果想轉換成JSON類型的資料，是需要處理的。直接用微軟提供的JavaScriptSerializer類直接序列化，會報錯。
所以這裡需要貼上兩個方法，專門用來轉換datatable的
#region DataTable轉換為JSON /// <summary> /// DataTable產生JSON /// </summary> /// <param name="dt"></param> /// <returns></returns> public static string CreateJSON(DataTable dt) { Dictionary<string, object> dit = new Dictionary<string, object>(); List<Dictionary<string, string>> list = DateTableConverter(dt); if (list != null) { dit[dt.TableName] = DateTableConverter(dt); return new JavaScriptSerializer().Serialize(dit); } else { return ""; } } /// <summary> /// 將DataTable資料轉化為字典類型 /// </summary> /// <param name="dt"></param> /// <returns></returns> public static List<Dictionary<string, string>> DateTableConverter(DataTable dt) { List<Dictionary<string, string>> list = new List<Dictionary<string, string>>(); string cloName = string.Empty; foreach (DataRow dr in dt.Rows) { Dictionary<string, string> cloumn = new Dictionary<string, string>(); foreach (DataColumn dc in dt.Columns) ......餘下全文>>
jquery 動態表格 增加資料
var tr = '<tr><td>'+value+'</td></tr>';
$('table').append(tr);
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
