JQuery はテーブルの行を動的に操作し、新しい行のイベントを追加します

今回は、JQueryでテーブルの行を動的に操作し、新しい行にイベントを追加するための注意事項を紹介します。実際のケースを見てみましょう。 。 実装された機能:

通常、テーブルを編集する場合、一度に追加される行数が多すぎると、ページ上のコンテンツが多すぎて応答が遅くなる可能性があります。このプログラムでは、テーブルに行を動的に追加でき、常に最大行数を維持します。以下に複数の空白行があります。

効果:

1: 元のページ

2: テーブル 1 に新しい行を追加し、タイムピッカーをバインドします

3: テーブル 2 に行を自動的に追加し、新しい行をタイムピッカーにバインドします

HTML ソース コード:

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 ソース コード:

/// <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 <p> この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 </p><p>推奨読書: </p><p><a href="http://www.php.cn/js-tutorial-394045.html" target="_blank">JQuery+Ajaxでテーブルを動的に生成する手順の詳細な説明</a><br></p><p><a href="http://www.php.cn/js-tutorial-394042.html" target="_blank"> jQueryのフィルターメソッドfilter()の使用の詳細な説明</a><br></p>

以上がJQuery はテーブルの行を動的に操作し、新しい行のイベントを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。