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面向对象之四 继承
Feb 08 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
详解JS函数重载
Dec 04 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
微信支付开发维权通知实例
2016/07/12 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
最简单的jQuery程序 入门者学习
2009/07/09 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
2015/08/04 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
详解require.js配置路径的用法和css的引入
2017/09/06 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
JavaScript循环遍历你会用哪些之小结篇
2018/09/28 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
Python最长公共子串算法实例
2015/03/07 Python
python类中super()和__init__()的区别
2016/10/18 Python
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
python实现名片管理系统
2018/11/29 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
浅析Python __name__ 是什么
2020/07/07 Python
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
民间个人借款协议书
2014/09/30 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
兵马俑的导游词
2015/02/02 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书