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动态操作表格的更多相关文章
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- IE7中使用Jquery动态操作name问题
问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...
- jquery 动态添加表格行
jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...
- 第84天：jQuery动态创建表格
jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- jQuery——动态给表格添加序号
摘录自:http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html 很多时候遇到需要对表格动态操作,而且一般都会有表格的序号,但是有时候 ...
- 使用jQuery动态克隆表格，并且添加至div中（使用前需要引入jQuery）
<!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...
- jquery动态创建表格
1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- JQuery动态添加表格，然后动态删除不成功问题
背景: 自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用 源码: function addtr() { var trinfo = & ...
- Jquery动态操作checkbox
问题的由来:html页面中使用checkbox给新建用户授权,然后提交到后台服务器,完成给用户授权.用户授权完成之后,如果用户的权限发生改变管理员需要修改多个用户的权限或查看某用户的权限,点击不同的用 ...
随机推荐
- scala lift环境搭建
Intellij IDEA + scala插件 工欲善其事,必先利其器! 学习scala已经有一段时间了,对scala这门语言爱不释手,但同时也为scala糟糕的IDE工具支持感到懊恼(我是一个100 ...
- Windows Azure
Windows Azure初体验 目前在IT界,云这个概念的第一意思不再是词典里的解释了.不过它们还是有相同点的——也许确实会酝酿出一块大蛋糕,可也是飘在天上,众神分食之,与我等P民无关.所谓云,不过 ...
- css3中webkit-box的用法（平分父元素）
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.目前box- ...
- Android中怎么去除标题栏详解
怎么出去标题栏,我再另一个博客中亦有实例在这里再详细的解释一下,也让自己能更加巩固最简单也是小重要的东西. 这里有两种方法是比较好的... 第一种: 首先,在values中建一个theme.xml 代 ...
- 云优化的概念、Entity Framework 7.0、简单吞吐量压力测试
云优化的概念.Entity Framework 7.0.简单吞吐量压力测试 继续上一篇<开发 ASP.NET vNext 初步总结(使用Visual Studio 2014 CTP1)>之 ...
- NET那点不为人知的事
ASP.NET那点不为人知的事(一) 我们上网时,在浏览器地址输入网址:Http://www.cnblogs.com,按下回车,一张网页就呈现在我们眼前.这究竟发生了什么?对于一名优秀的Progr ...
- Azure的两种关系型数据库服务：SQL Azure与SQL Server VM的不同
Azure的两种关系型数据库服务:SQL Azure与SQL Server VM的不同 <Windows Azure Platform 系列文章目录> 如果熟悉Windows Azure平 ...
- 应用facebook .net sdk
1.本博客主要介绍如何应用facebook .net SDK,实现发帖.点赞.上传照片视频等功能,更多关于facebook API,请参考:https://developers.facebook.co ...
- spring mvc在普通类中获取HttpServletRequest对象
如题,需要在web.xml中配置request监听,如下 <listener> <description>spring request监听器</description&g ...
- [转]unload dynamic library needs two dlclose() calls?
src: http://stackoverflow.com/questions/8793099/unload-dynamic-library-needs-two-dlclose-calls Quest ...