JQuery dynamically manipulate table rows and add events for new rows

This time I will bring you JQuery to dynamically operate table rows and add events to new rows. What are the precautions for JQuery to dynamically operate table rows and add events to new rows? The following is a practical case. Get up and take a look. Implementation function:

Usually when editing a table, the number of rows in the table is uncertain. If too many rows are added at one time, it may cause too much content on the page and slow down the response; this is achieved through this program The table dynamically adds rows and always maintains multiple blank rows at the bottom.

Effect:

One: Original page

Two: Add new rows to table 1 and bind timepicker

Three: Table 2 Automatically add rows, new rows are bound to timepicker

HTML source code:

nbsp;html> 
 
 
<meta> 
<title></title> 
<link> 
<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> 
 
 

                                                                         

表头1	表头1	表头1
表头2	表头2	表头2
表尾1	表尾2	表尾3

 

                                                                           

表头1	表头1	表头1
表头2	表头2	表头2
表尾1	表尾2	表尾3

      <script></script>  <script></script>  <script></script>  <script></script>  <script> $(function () { $(".autoRows").tableAutoRow(aaa); function aaa(row) { $(row).find(&#39;:text&#39;).timepicker(); } }); function addrow(obj) { $.fn.tableAutoRow.insertRow(obj); } </script>

JS source code:

/// <reference></reference> 
//为表格主体添加单击事件,当单击时添加行数,使表格保持有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  0) { 
var lastRow = tb.rows[tb.rows.length - 1]; 
for (var j = 0; j  cellsCount - 1 || !endColumn) { //如果未指定清除终止列则清除到最后一列前(通常最后一列用于放置清除按钮) 
endColumn = cellsCount - 1; 
} 
if (isReset == undefined) { 
isReset = false; 
} 
for (var c = startColnum; c = 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  Believe it or not After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website! <p></p>Recommended reading: <p></p><p>Detailed explanation of the steps to dynamically generate Table with JQuery Ajax<a href="http://www.php.cn/js-tutorial-394045.html" target="_blank"></a><br></p><p>Detailed explanation of the use of jQuery filter method filter()<a href="http://www.php.cn/js-tutorial-394042.html" target="_blank"></a><br></p>

The above is the detailed content of JQuery dynamically manipulate table rows and add events for new rows. For more information, please follow other related articles on the PHP Chinese website!