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给新建用户授权,然后提交到后台服务器,完成给用户授权.用户授权完成之后,如果用户的权限发生改变管理员需要修改多个用户的权限或查看某用户的权限,点击不同的用 ...
随机推荐
- 使用Python改写的身份证信息查询小程序
花了几天时间过了一遍python基础.真心感觉python让世界充满了爱…先简单的使用一下python好了,拿以前写的<C语言身份证信息查询系统(修改版)>开刀~ 很多东西,不需要考虑C语 ...
- 怎样以学习单片机为契机，逐步成为优秀的project师
现状 不知道阅读本文的读者,在初学单片机时是否和我以前一样迷茫.看到各种新的术语,疑惑不解:不知道从何学起:照着书中的样例一步一步做都没有问题,可是自己试着做东西,遇到各种问题却不会解决,向别人提问, ...
- serialVersionUID行动
ORIGINAL:未知 Java断类的serialVersionUID来验证版本号一致性的.在进行反序列化时,JVM会把传来的字节流中的serialVersionUID与本地对应实体(类)的seria ...
- Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作
Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作 1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1. ...
- [翻译]HBase 中的 ACID
同前面翻译的一篇关联的,同作者的另一篇:ACID in HBase 这一篇不是单纯地描述一个问题,而是以 ACID 为主题,介绍了其在 HBase 中各个部分的体现及实现. ACID,即:原子性(At ...
- 【ios开发】自定义Actionsheet实现时间选择器和省市区选择器
最近的工程有一个个人资料页面,需要填写生日和地区的信息,需要自己定义个actionsheet. 但是到网上搜了一下都不太合适,只好自己研究研究,重写了一个.共享出来给大家用用,突然发现自己精神很高尚吗 ...
- 对于vijos11.2模拟赛
特意起了个傻逼标题,只是想提醒一下自己以后不要犯逗(所以应该没有什么神犇点进来吧?) T1,T3 当场写的时候就觉得是不可写的,看了题解之后还是觉得不可写,人弱没办法.到了这个时候也懒得管这么难的东西 ...
- 通用性站点管理后台(Bee OPOA Platform)
当前标签: Bee OPOA Platform 通用性站点管理后台(Bee OPOA Platform) (5)- [扩展]基于WebSocket的监视Sql执行功能 蜂 2013-10-25 1 ...
- Object-c学习之路（oc点语法）
最近想学习object-c了自己上网找了一些资料自学了一下:oc中的点语法是为了java.c等的程序员更好的上手而添加的功能. 主函数 // // main.m // OcTest1 // // Cr ...
- 初探中间件(middleware)
初探中间件(middleware) 因为考虑到文章的长度, 所以 BaseHandler 的展开被推迟了. 在 BaseHandler 中隐藏着中间件的信息, 较常见的 SessionMiddlewa ...