JQuery はテーブルの動的行追加を実装し、新しい rows_jquery のイベントを追加します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JQuery はテーブルの動的行追加を実装し、新しい rows_jquery のイベントを追加します

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:40 PM

関数の実装:

通常、テーブルを編集する場合、一度に追加する行数が多すぎると、このプログラムによるテーブルの応答が遅くなる可能性があります。行を動的に追加でき、常に複数の行を下部に保持します。

効果:

1: オリジナルページ

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

3: テーブル 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);

ログイン後にコピー

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7643

CakePHP チュートリアル

1392

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

151

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？ Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。