首页 / JQUERY / JQuery动态操作表行并对新行添加事件

JQuery动态操作表行并对新行添加事件

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JQuery动态操作表行并对新行添加事件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8685字，纯文字阅读大概需要13分钟。

内容图文

这次给大家带来JQuery动态操作表行并对新行添加事件，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="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> 
<p style="height:20px;"></p> 
<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);

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的JQuery动态操作表行并对新行添加事件全部内容，希望文章能够帮你解决JQuery动态操作表行并对新行添加事件所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/291589.html

来源：【匿名】

【上一篇】jQuery实现旋转幻灯片轮播效果（附代码）【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【JQuery动态操作表行并对新行添加事件】教程文章相关的互联网学习教程文章

jQuery事件之键盘事件

一、首先需要知道的是： 1、keydown() keydown事件会在键盘按下时触发. 2、keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3、keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键二、获得键盘上对应的ascII码： $(document).keydown(function(event){ alert(event.keyCode); }); $tips: 上面例子中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是ascI...

Jquery10 高级事件【代码】【图】

学习要点：1.模拟操作2.命名空间3.事件委托4.on、off 和 one jQuery 不但封装了大量常用的事件处理，还提供了不少高级事件方便开发者使用。比如模拟用户触发事件、事件委托事件、和统一整合的 on 和 off，以及仅执行一次的 one 方法。这些方法大大降低了开发者难度，提升了开发者的开发体验。一．模拟操作在事件触发的时候，有时我们需要一些模拟用户行为的操作。例如：当网页加载完毕后自行点击一个按钮触发一个事件，而不是用户去...

jquery 如何给新生成的元素绑定 hover事件？【代码】

$("table tr").live({ mouseenter: function() { //todo }, mouseleave: function() { //todo }}); $(‘ul li‘).live(‘mouseenter‘,function(){ $(‘#tips‘).show();}).live(‘mouseleave‘,function(){ $(‘#tips‘).hide();});原文：http://www.cnblogs.com/yanglian/p/4200987.html

jquery 传递事件的自定义数据

整理一下1. <script type="text/javascript">$(document).ready(function(){ $("input").select(function(e){ $("input").after("文本被选中！"+e.b); }); var e = jQuery.Event("select",{a:1,b:"abc"}); $("button").click(function(){ $("input").trigger(e); });});</script>==================================2.<script type="text/javascript">$(document).ready(function(){ $("input").select(function(e,ms...

jQuery实现按Enter键触发事件？【代码】

按Enter触发 $(function(){document.onkeydown = function(e){ var ev = document.all ? window.event : e;if(ev.keyCode==13) {// 如（ev.ctrlKey && ev.keyCode==13）为ctrl+Center 触发alert("huiche");}}});按Enter触发$(function () {document.onkeydown = function (event) {var e = event || window.event || arguments.callee.caller.arguments[0];if (e && e.keyCode == 13) {//to do something; }};}); 单...

JQuery模拟点击页面上的所有a标签，触发onclick事件【代码】

注意：这种方法需要给所有的a标签加上id属性<script>$(function () {// 模拟点击页面上的所有a标签，触发onclick事件$("a").each(function () {document.getElementById(this.id).click();})}) </script>原文：https://www.cnblogs.com/daleyzou/p/9500782.html

jQuery中的事件与动画

1：jQuery事件是对JavaScript事件的封装jQuery中事件分类：基础事件：鼠标事件，（当用户在文档上移动或单击鼠标时而产生的事件） click( ) 触发或将函数绑定到指定元素的click事件单击鼠标时 mouseover( ) 触发或将函数绑定到指定元素的mouseover事件鼠标指针移过时 mouseenter( ) 触发或将函数绑定到指定元素的mouseenter事件鼠标指针进入时 ...

jQuery选择器和事件【代码】

一、jQuery选择器 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="jquery-1.10.1.min.js"></script><script src="Selector.js"></script></head><body><p>p1</p><p class="pclass">p2</p><button>Click me</button></body> </html>$(document).ready(function(){$("button").click(function(){$(".pclass").text("p元素被修改了");}) });二、jQuery事件 1.jQuery事件：常用事件方法...

jQuery从0开始之【二】jQuery使用原则及常用事件

jQuery名称冲突问题：jQuery使用$符号作为jQuery的简介方式。但是某些JavaScript库中的函数（比如Prototype）同样使用$符号。jQuery使用名为noConflict()的方法来解决该问题。var jq=jQuery.noConflict()，帮助我们使用自己的名称（比如jq）来代替$符号。把所有的jQuery代码置于事件处理函数中把所有事件处理函数放置于文档就绪事件处理器中把jQuery代码置于单独的.js文件中如果存在名称冲突，则重命名jQuery库jQuery的使用原则能让...

jQuery学习之路（3）- 事件【代码】【图】

▓▓▓▓▓▓ 大致介绍jQuery增加了并扩展了基本的事件处理机制，不但提供了更加优雅的事件处理语法，而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM　　　　在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的，但是他们也有一些不同点　　　　1、执行时机　　　　例如我们有一个有很多图片的网页　　　　$(document).ready()方法是在这个网页的DOM树加载完就可以执...

jQuery中绑定事件的几种方法

以click事件为例，jQuery中绑定事件有三种方法：（1）target.click(function(){}); （2）target.bind("click",function(){}); （3）target.live("click",function(){});第一种方法很好理解，其实就和普通JS的用法差不多，只是少了一个on而已第二、三种方法都是绑定事件，但是二者又有很大的不同，下面着重讲解一下，因为这个如果用到Jquery的框架的话是用的挺多的，尤其要注意二者的区别。【bind和live的区别】 live方...

jquery 事件绑定处理方式【代码】

jquery 事件绑定的几种方式，click， blind,live,<SPAN style=‘font: 12px/18px "Microsoft YaHei", Verdana, Arial, Helvetica, sans-serif; text-align: left; color: rgb(0, 0, 0); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; float: none; display: inline !important; white-space: normal; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 25...

JQuery事件冒泡【代码】

1. 什么叫事件冒泡？　　Jquery中的事件会按照DOM的层次结构像水泡一样不断向上直至顶端　　《锋利的Jquery》中给出的例子如下： 1<!DOCTYPE html> 2<head></head> 3<body> 4<div id="content"> 5 outer div element6<span>inner div elements</span> 7 outer div elements 8</div> 9<div id="msg"></div>10<script type="text/javascript">11　　　　$(function(){ 12　　　　　　$(‘span‘).bind("click",fun...

jQuery绑定动态元素的点击事件无效【代码】

之前就一直受这个问题的困扰，在写ajax加载数据的时候发现，后面追加进来的demo节点元素，失去了之前的点击事件。为什么点击事件失效，我们该怎么去解决呢?那么，我们通过下面的示例简单说明。示例如下：<div><ul ><li>Kubernetes：下一代分布式系统的护戒使者</li><li>机器学习工具--Pandas cheat sheet</li><li>Android 8.0 正式版即将发布谷歌还要建超人模型</li>...//li是动态生成</ul> </div><script type="text/javascript"...

jquery阻止事件的两种实现方式

再阻止事件冒泡的方面,jquery有两种方式:一种是 return false;另外一种是 e.stopPropagation() html代码 <form id="form1" runat="server"><div id="divOne" onclick="alert(‘我是最外层‘);"> <div id="divTwo" onclick="alert(‘我是中间层！‘)"> <a id="hr_three" href="http://www.baidu.com">点击我</a> </div></div></form>js代码: $(‘#hr_three‘).click(function(e){ alert(‘我是最里层！‘) //e....

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / JQuery动态操作表行并对新行添加事件

JQuery动态操作表行并对新行添加事件

内容导读

内容图文

内容总结

内容备注

内容手机端

【JQuery动态操作表行并对新行添加事件】教程文章相关的互联网学习教程文章

jQuery事件之键盘事件

Jquery10 高级事件【代码】【图】

jquery 如何给新生成的元素绑定 hover事件？【代码】

jquery 传递事件的自定义数据

jQuery实现按Enter键触发事件？【代码】

JQuery模拟点击页面上的所有a标签，触发onclick事件【代码】

jQuery中的事件与动画

jQuery选择器和事件【代码】

jQuery从0开始之【二】jQuery使用原则及常用事件

jQuery学习之路（3）- 事件【代码】【图】

jQuery中绑定事件的几种方法

jquery 事件绑定处理方式【代码】

JQuery事件冒泡【代码】

jQuery绑定动态元素的点击事件无效【代码】

jquery阻止事件的两种实现方式

JQUERY - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程