JQueryは、テーブルの動的な行の追加と新しい行のイベントの追加を実現します.
11629 ワード
実装機能:
通常、表を編集するときの表の行数は不確定で、一度に行を増やしすぎるとページの内容が多すぎて反応が遅くなる可能性があります.このプログラムにより、テーブルの動的な行の追加が実現され、一番下に複数の空白行が保持されます.
効果:
一:オリジナルページ
二:表1新しい行を追加しtimepickerをバインドする
三:表2は自動的に行を増やし、新しい行はtimepickerをバインドする
HTMLソース:
通常、表を編集するときの表の行数は不確定で、一度に行を増やしすぎるとページの内容が多すぎて反応が遅くなる可能性があります.このプログラムにより、テーブルの動的な行の追加が実現され、一番下に複数の空白行が保持されます.
効果:
一:オリジナルページ
二:表1新しい行を追加しtimepickerをバインドする
三:表2は自動的に行を増やし、新しい行はtimepickerをバインドする
HTMLソース:
<link href="../Script/jquery-easyui-1.3.2/themes/default/easyui.css" rel="external nofollow"/>
<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>
</code></pre><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;"/>
<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>
<script src="../Script/jquery-1.7.2.min.js"/>
<script src="../Script/jquery.tableAutoRow.js"/>
<script src="../Script/jquery-easyui-1.3.2/jquery.easyui.min.js"/>
<script src="../Script/jquery.timepicker.js"/>
<script type="text/javascript">
$(function () {
$(".autoRows").tableAutoRow(aaa);
function aaa(row) {
$(row).find(':text').timepicker();
}
});
function addrow(obj) {
$.fn.tableAutoRow.insertRow(obj);
}
</script>
</div>
<p><strong>JS ：</strong></p>
<div class="jb51code">
<pre><code>
/// <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);</code></pre>
</div>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"/>
</div>
</div>
</div>
</div>