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遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...
随机推荐
- 实时查看docker容器日志
实时查看docker容器日志 $ sudo docker logs -f -t --tail 行数 容器名 例:实时查看docker容器名为s12的最后10行日志 $ sudo docker logs ...
- ionic andorid apk 签名, 查看签名MD5
ionic cordova build android生成的是带签名的android-debug.apk, 这个是可以在手机上安装的, 但是换个电脑打包这个签名就不一样了, 这样就不能直接替换安装了, ...
- 每天一个linux命令:top
1.命令简介 top (top) 令经常用来实时监控linux的系统状况,比如cpu.内存的使用,类似于Windows的任务管理器. 2.用法 top -hv | -abcHimMsS -d dela ...
- Oracle中判断字段是否为数字
在我们平常的开发中可能会遇到这样的问题,就是判断某一列是否全部由数字组成,我们都知道oracle并没有给我们提供这样一个现成的函数,那么根据我的经验我总结了两个行之有效的方法(列名:column,表名 ...
- C#学习笔记（34）——委托传值（回忆版）
说明(2018-4-6 20:31:03): 1. 昨天晚上看三层,看完第一天的最后一节,会员的修改和增加,感觉欲仙欲死,果断关机睡觉. 2. 上午搞了半天哈利波特的原版书epub的下载,结果都没发现 ...
- SpringBoot集成RabbitMQ消息队列搭建与ACK消息确认入门
1.RabbitMQ介绍 RabbitMQ是实现AMQP(高级消息队列协议)的消息中间件的一种,最初起源于金融系统,用于在分布式系统中存储转发消息,在易用性.扩展性.高可用性等方面表现不俗.Rabbi ...
- 【iCore1S 双核心板_ARM】例程二十：UART_IAP_ARM实验——更新升级STM32
实验现象及操作说明: 1.本例程共有两个代码包,APP和IAP,IAP程序功能实现将APP程序升级至STM32中. 2.直接上电或烧写程序将执行升级的APP应用程序. BIN升级文件产生方法: 1.编 ...
- 你真的理解Python中MRO算法吗？[转]
[前言] MRO(Method Resolution Order):方法解析顺序.Python语言包含了很多优秀的特性,其中多重继承就是其中之一,但是多重继承会引发很多问题,比如二义性,Python中 ...
- Oracle分析函数-keep(dense_rank first/last)
select * from criss_sales where dept_id = 'D02' order by sale_date ; 此时有个新需求,希望查看部门 D02 内,销售记录时间最早,销 ...
- 每天学点Linux-选取命令CUT和GREP
选取命令就是将一段数据经过分析后,取出我们所想要的.或者是经由分析关键词,取得我们所想要的那一行!一般来说,选取命令通常是针对一行一行的数据来进行分析的, 并不是整篇信息分析.cut cut命令可以将 ...