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="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.11.1.min.js" /> //为表格主体添加单击事件,当单击时添加行数,使表格保持有n个空行
(function ($) {
$.fn.extend({
tableAutoRow: function (rowfunction) {
return $(this).each(function () {
var tb = this;
if (!(this.tagName.toUpperCase() == "TBODY")) {
if (!this.tBodies[0]) {
return;
} else {
tb = this.tBodies[0];
}
}
//记录当前行数
var rowsCount = tb.rows.length;
//添加一个隐藏行，为了避免事件重复绑定，后面新增行复制此行
var lastRow = tb.rows[tb.rows.length - 1];
if (!$(lastRow).is(":hidden")) {
var row = $(lastRow).clone(true, true);
$(row).insertAfter($(tb).find("tr:last")).hide();
}
//绑定事件到行、单元格，单击时添加行
$(tb).on('click', 'td,tr', function (e) { autoRows(e, rowfunction); });
//绑定事件到input元素，当获取焦点或者单击时添加行
$(tb).on('focus', 'input', function (e) { autoRows(e, rowfunction); });
//单击第一行，初始化
tb.rows[rowsCount - 1].click();
//对原有行添加事件
if (typeof (rowfunction) == 'function') {
for (var i = 0 ; i < rowsCount; i++) {
rowfunction(tb.rows[i]);
}
}
});
}
});
//自动增加行
function autoRows(e, rowfunction) {
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();
//如果有回调函数则执行
if (typeof (rowfunction) == 'function') {
rowfunction(row);
}
}
}
} $.fn.tableAutoRow.deleteRow = function (obj) {
if (!confirm('确定删除此行？')) {
return;
}
var loop = 0; //加入循环次数，防止死循环
while (obj.tagName != "TR" && loop < 10) {
obj = obj.parentNode;
loop++;
}
if (obj.tagName != "TR") {
return;
}
if (obj.parentNode.rows.length == 2) {
alert('不能删除全部行');
return;
} else {
$(obj).remove();
}
} //在表格中指定位置插入指定行数,新插入的行内容为同一表格主体最后一行
//obj:行内的任意对象
//n:要增加的行数
//isInsertAfter:插入在当前行的后面，否则在前面
$.fn.tableAutoRow.insertRow = function (obj, n, 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 2:
var isInsertAfter = true;
case 1:
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();
}
}
}
//清除指定行数据
//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++)<span style="white-space:pre"> </span>//循环各列,设置单元格里的控件值
{
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);
$(function(){
$('.autoRows').tableAutoRow();
});
JQuery实现表格自动增加行，对新行添加事件的更多相关文章
- JQuery实现表格动态增加行并对新行添加事件
实现功能: 通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢:通过此程序实现表格动态增加行,一直保持最下面有多个空白行. 效果: 一:原始页面 二:表1增加新行并 ...
- WPF中自动增加行（动画）的TextBox
原文:WPF中自动增加行(动画)的TextBox WPF中自动增加行(动画)的TextBox WPF中的Textbox控件是可以自动换行的,只要设置TextWrapping属性为"Wrap& ...
- DataTable数据类型的一些操作 增加行、插入行、修改数据、修改列名、修改列顺序、计算、选取或删除行（列）、排序、某列distinct值 等
Datatable 这个数据类型在C#中涉及到对数据库读取时的用处还是挺大的,最近在处理一个报表开发时,一开始把所有的操作都放在sql 上面来做,就是我需要什么样的数据我就query出什么,但是这样其 ...
- datagridview自动增加行高度和显示全部内容
this.dataGridView1.AutoSizeRowsMode = DataGridViewAutoSizeRowsMode.AllCellsExceptHeaders; //自动调动dat ...
- 关于datagridview自动增加行高度和显示全部内容的设置
this.dataGridView1.AutoSizeRowsMode = DataGridViewAutoSizeRowsMode.AllCellsExceptHeaders; //自动调动dat ...
- jquery 设置表格奇偶数的颜色和行被选中的颜色样式jquery 设置表格奇偶数的颜色和行被选中的颜色样式
query 代码 $(funtion(){ //设置偶数行和奇数行 $("tbody>tr:odd").addClass("ou"); //为奇数行设 ...
- poi读取Excel模板并修改模板内容与动态的增加行
有时候我们可能遇到相当复杂的excel,比如表头的合并等操作,一种简单的方式就是直接代码合并(浪费时间),另一种就是写好模板,动态的向模板中增加行和修改指定单元格数据. 1.一个简单的根据模板shee ...
- C# 在Word表格中插入新行（表格含合并行）
public string CreateWordFile(string CheckedInfo) { string message = "" ...
- jquery表格动态增删改及取数据绑定数据完整方案
一 前言 上一篇Jquery遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...
随机推荐
- settings设置中文admin
所以更改setttings.py 下 LANGUAGE_CODE = 'zh-Hans'即可
- Jenkins安装卸载
下载安装去Jenkins官网下载Jenkins,Centos的话会下载到.rpm安装文件 安装.rpm文件使用命令rpm -ivh **.rpm 安装完成之后使用命令rpm -qc jenkins查看 ...
- Android Studio打包过程和应用安装过程
三个部分,检查项目和读取基本配置,Gradle Build,Apk Install和LaunchActivity. 应用安装到手机,会复制APK安装包到data/app目录下,解压并扫描安装包,把de ...
- 设置 WPF 的内容支持触摸直接滚动
在滚动内容上设置属性 ScrollViewer.PanningMode 的值即可. 另外可重写 OnManipulationBoundaryFeedback 方法来替换系统默认的滚动到最上最下时触发的 ...
- MATLAB基础函数命令
1. 常用命令 dir:列出当前目录下的所有文件 clc:清除命令窗 clear all:清除环境(从内存中清除所有变量) who:将内存中的当前变量以简单形式列出 close all: 关闭所有的 ...
- 解决“Comparison method violates its general contract!”
The ONE跑MaxProp.Prophet可能(取决于你JDK的版本)会报“java.lang.IllegalArgumentException: Comparison method violat ...
- hdoj：2048
#include <iostream> using namespace std; ]; ]; int main() { int C; a[] = ; a[] = ; b[] = ; b[] ...
- Android中使用BufferedReader.readline阻塞读取不到数据,但是ready返回true
通过socket测试工具在电脑上发送消息,Android真机可以收到响应BufferedReader.ready()返回true,但是readline却一直阻塞. 原因:readline()只有在遇到 ...
- C# SMTP 邮件发送之QQ邮箱篇
邮件发送大家都已经非常熟悉了,微软自带的System.Net.Mail也很好用,那为什么还要说呢? QQ邮箱的SMTP以前是非SSL,用未加密的25端口,后来发送都改成SSL了,端口为465或587( ...
- python 字符编码判断 chardet评测
之前一直想找到一个模块,针对字符判断是什么字符集编码的库 网上有chardet的blog,发现自己的环境有这个库,于是就做了测试 >>> import chardet >> ...