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遮罩插件,想罩哪就罩哪! 结尾的预告终于来了. 近期参与了一个针对内部员工个人信息收集的系统,其中有一个需求是在填写各个相关信息时,需要能动态的增加行当时公司有自己的解决方 ...
随机推荐
- MySQL优化的一些基础
在Apache, PHP, mysql的体系架构中,MySQL对于性能的影响最大,也是关键的核心部分.对于Discuz!论坛程序也是如此,MySQL的设置是否合理优化,直接 影响到论坛的速度和承载量! ...
- [数位dp] spoj 10738 Ra-One Numbers
题意:给定x.y.为[x,y]之间有多少个数的偶数位和减去奇数位和等于一. 个位是第一位. 样例: 10=1-0=1 所以10是这种数 思路:数位dp[i][sum][ok] i位和为sum 是否含有 ...
- N-gram的简单的介绍
目录: 1. 联合概率 2. 条件概率 3. N-gram的计算方式 4. 评估N-gram的模型. 前言: N-gram是机器学习中NLP处理中的一个较为重要的语言模型,常用来做句子相似度比较,模糊 ...
- sql 有条件计数
select InstitutionID=LEFT(InstitutionID,9), Irregularities_Type=sum(CASE WHEN Irregularities_Type> ...
- 中期linux课程考试题
[口头表达] 1)请描述你了解的磁盘分区的相关知识2)什么是rsync,你有什么生产环境的应用?3)在生产环境中,公司的IDC机房即将超过254台机器,请问你有什么解决方案来规划扩展IDC机房的内网网 ...
- celery --分布式任务队列
一.介绍 celery是一个基于python开发的分布式异步消息任务队列,用于处理大量消息,同时为操作提供维护此类系统所需的工具. 它是一个任务队列,专注于实时处理,同时还支持任务调度.如果你的业务场 ...
- MUI框架的缩写输入
html 上面--代表最小触发字符 下面--代表非必要完整触发字符 组件 触发字符 mDoctype(mui-dom结构) mdo ctype mBody(主体) mbo dy m ...
- Sublime Text 文件路径补全
最有效和好用的是AutoFileName插件,效果如下: 表格编辑 Table Editor相当好用,安装好后参考自述文件(Preferences --> Package Settings -- ...
- 再杀掉app之后 删除NSUserDefault存在本地的数据
这两天在处理 app退出后删除本地数据 在appDelegate里的这个函数里设置发现进不去 - (void)applicationWillTerminate:(UIApplication*)ap ...
- java 爬取 国税局 省市区级联关系
爬取网址 http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2018/index.html 因为数据比较大,存储为一个json,会内存溢出. 所以按照每 ...