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给新建用户授权,然后提交到后台服务器,完成给用户授权.用户授权完成之后,如果用户的权限发生改变管理员需要修改多个用户的权限或查看某用户的权限,点击不同的用 ...
随机推荐
- vsphere client 虚拟机安装操系统
vSphere 是 VMware 推出的基于云计算的新一代数据中心虚拟化套件,提供了虚拟化基础架构.高可用性.集中管理.监控等一整套解决方案. VMware ESXi 是VMware vSphere ...
- 修改MvcPager分页控件以适用Bootstrap 效果(含英文版,可下载)
软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPager 是个不错的选择.请访问http://www.webdiyer.com/mvcpager/ 由于自带的分页样式不能和项目整体 ...
- MyEclipse的真正价值——时间等于金钱
全世界成千上万的Java开发者选择MyEclipse作为首选的Eclipse IDE,甚至超过了著名的开发工具 IBM Rational和Eclipse Java. 为什么? 很简单,MyEclips ...
- CSS边框阴影效果
ul { margin:5px 0 0 0; padding:0; list-style:none; width:300px; background:#f1f1f1; }li { border-lef ...
- javascript 学习总结（三）Boolean对象
Boolean对象 /* 创建 Boolean 对象的语法: new Boolean(value); //构造函数 Boolean(value); //转换函数 参数 value 由布尔对象存放的值或 ...
- Codeforces 10D LCIS 找出最长公共子和产量增加这个序列 dp
主题链接:点击打开链接 意甲冠军: 特定n长序列 给定k长序列 求LCIS并输出这个子序列 如有多解输出随意解.. = - = 敲的时候听着小曲儿pre的含义还没有想清楚,万万没想到就过了... #i ...
- Visual Studio 2013发布Cloud Service至Azure China
Visual Studio 2013发布Cloud Service至Azure China <Windows Azure Platform 系列文章目录> 之前有很多网友询问我如何通过VS ...
- effective java读书小记（一）创建和销毁对象
序言 <effective java>可谓是java学习者心中的一本绝对不能不拜读的好书,她对于目标读者(有一点编程基础和开发经验)的人来说,由浅入深,言简意赅.每一章节都分为若干的条目, ...
- vue.js源码精析
MVVM大比拼之vue.js源码精析 VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多 ...
- .NET/Mono
C#(或者说.NET/Mono)能做的那些事 不做语言之争,只陈述事实: 1.桌面软件 不仅是在Windows上,有了开源的Mono,在Apple Mac和Linux(如:Ubuntu)上也有C#的施 ...