JQuery实现动态操作表格
更新时间:2017年01月11日 13:25:35 作者:Yu2
本文主要分享了jQuery实现对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="scripts/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function () { //获取表格的行数 var tabRowLen = $("table tbody tr").length; //点击add按钮时, $("#add").on("click", function () { //获取表格的行数 tabRowLen = $("table tbody tr").length; var index = tabRowLen - 1; //表格行数为0时,或者表格不存在空值时 if (IsNull(index) || tabRowLen == 0) { //添加一行 $("table tbody").append("<tr>" + "<td><input type='text' class='Name'/><div id='dName" + tabRowLen + "'></div></td>" + "<td><input type='text' class='Age'/><div id='dAge" + tabRowLen + "'></div></td>" + "<td><input type='button' class='add' value='delete ' /></td></tr>"); //删除一行 $(".add").on("click", function () { $(this).parents("tr").remove(); }); } //keyup事件 $("table input").on("keyup", function () { //验证是否有空值 IsNull(index); }); }); function IsNull(trIndex) { var result = true; debugger; //遍历表格的input $("table tbody input").each(function (trIndex) { //判断是否存在空值 if ($("table tbody input")[trIndex].value == "") { //提示空值 result = false; $(this).next().html("required"); } //不为空 else { //清空提示信息 $(this).next().html(""); } }); return result; }; }); </script> </head> <body> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th><input type="button" id="add" value="addRow " /></th> </tr> </thead> <tbody></tbody> </table> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
相关文章
Jquery change(fontsize,background) 改变颜色与背景的代码
基于Jquery的改变颜色与背景的代码,对于学习jquery的朋友可以参考下。2010-05-05jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
这篇文章主要介绍了jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用,结合实例形式较为详细的分析了jQuery事件绑定、解绑、事件冒泡、阻止冒泡等相关原理与应用技巧,需要的朋友可以参考下2019-05-05jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
这篇文章主要介绍了jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一,需要的朋友可以参考下2017-05-05jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
这篇文章主要介绍了jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮,需要的朋友可以参考下2015-11-11DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们,下面介绍DOM事件阶段以及事件捕获与事件冒泡先后执行顺序2015-08-08JavaScript 弹出子窗体并返回结果到父窗体的实现代码
下面小编就为大家带来一篇JavaScript 弹出子窗体并返回结果到父窗体的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-05
最新评论