JQuery实现动态操作表格


Posted in Javascript onJanuary 11, 2017

最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证。

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
JQuery教学之性能优化
May 14 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
实现vuex与组件data之间的数据同步更新方式
Nov 12 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 #Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 #Javascript
Vue数据驱动模拟实现2
Jan 11 #Javascript
jQuery实现对象转为url参数的方法
Jan 11 #Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 #Javascript
移动端界面的适配
Jan 11 #Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 #Javascript
You might like
收集的php编写大型网站问题集
2007/03/06 PHP
php 文件上传类代码
2011/08/06 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JavaScript Prototype对象
2009/01/07 Javascript
JQuery 在线引用及测试引用是否成功
2014/06/24 Javascript
取得元素的左和上偏移量的方法
2014/09/17 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
应聘自荐书
2013/10/08 职场文书
社团活动总结格式
2014/08/29 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python