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 相关文章推荐
js window.onload 加载多个函数的方法
Nov 02 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
javascript时区函数介绍
Sep 14 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
JavaScript访问CSS属性的几种方式介绍
Jul 21 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
Sep 27 Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
es6数组includes()用法实例分析
Apr 18 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
List all the Databases on a SQL Server
2007/06/21 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
JavaScript canvas基于数组生成柱状图代码实例
2020/03/06 Javascript
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
Python按行读取文件的简单实现方法
2016/06/22 Python
python的Tqdm模块的使用
2018/01/10 Python
python3.x实现发送邮件功能
2018/05/22 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
中等生评语大全
2014/05/04 职场文书
教师师德师风整改措施
2014/10/24 职场文书
催款函怎么写
2015/06/24 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
二年级数学教学反思
2016/02/16 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
redis复制有可能碰到的问题汇总
2022/04/03 Redis