新人，小白一枚，刚刚参加工作，所以会在这里记录一些遇到的问题。

　　最近要做的东西，是对一个表格动态的添加行，删除行，并且对表格中内容进行非空验证。

<!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动态操作表格的更多相关文章

  1. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  2. IE7中使用Jquery动态操作name问题

    问题:IE7中无法使用Jquery动态操作页面元素的name属性. 在项目中有出现问题,某些客户的机器偶尔会有,后台取不到前台的数据值. 然开发和测试环境总是不能重现问题.坑爹之处就在于此,不能重现就 ...

  3. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  4. 第84天：jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. jQuery——动态给表格添加序号

    摘录自:http://www.cnblogs.com/picaso/archive/2012/10/08/2715564.html 很多时候遇到需要对表格动态操作,而且一般都会有表格的序号,但是有时候 ...

  6. 使用jQuery动态克隆表格，并且添加至div中（使用前需要引入jQuery）

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  7. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. JQuery动态添加表格，然后动态删除不成功问题

    背景: 自己做了一个测试网页,想动态添加表格,然后删除,按照网上的教程写完,发现点击"删除参数"按钮没用 源码: function addtr() { var trinfo = & ...

  9. Jquery动态操作checkbox

    问题的由来:html页面中使用checkbox给新建用户授权,然后提交到后台服务器,完成给用户授权.用户授权完成之后,如果用户的权限发生改变管理员需要修改多个用户的权限或查看某用户的权限,点击不同的用 ...

随机推荐

  1. datagridcolumn单元格怎么显示查询到的某个表的字段值（字段值可能为多个）

    例如,在之前做的项目中,查询mhz_xckcr表,select出某个业务的现场勘察人信息,select出的现场勘察人姓名(可能有多个)要在前台datagrid的一个datagridcolmn单元格显示 ...

  2. Oracle中注意用户的访问权限

    新增表.序列.存储过程等,要注意用户(例如System)的权限.如果在增删改查过程中出现数据库读写权限的报错,则在建表(或者序列.存储过程等)时,在脚本前面加 GRANT CREATE TABLE T ...

  3. rpt水晶报表制作过程

    原文:rpt水晶报表制作过程 最近公司安排一个以前的项目,里面需要用到水晶报表,由于原来做这个项目的同事离职,所在公司的同事报表做成了rdlc类型的,而这类报表在加载的时候很难动态的从数据库加载数据, ...

  4. sqlclr返回数据集案例

    ----------------------------------------------返回一张表,但只有一条数据,最后一次设置的. [Microsoft.SqlServer.Server.Sql ...

  5. Entity Framework,TransactionScope 混合使用的问题讨论

    using (var ts = new TransactionScope()) { string connStr = "Data Source=.;Initial Catalog=Test; ...

  6. C++虚函数表调用学习

    知识点是看 陈皓大哥的博客,代码也参考了他的,不过做了很小的改动. 原文链接:http://blog.csdn.net/haoel/article/details/1948051 #include & ...

  7. 【C++ 中文手册】即将完成

    [C++ 中文手册]即将完成 内容包含C++11,历时一年,日夜赶工,即将完成! 该参考手册主要由以下四部份内容组成: C++ 语言 C++ 继承了 C 语言 的大部分语法,并在其基础上修改或增加部分 ...

  8. POJ 2337 输出欧拉路径

    太无语了. 这道题做了一整天. 主要还是我太弱了. 以后这个就当输出欧拉路径的模版吧. 题目中的输出字典序最小我有点搞不清楚,看了别人是这么写的.但是我发现我过不了后面DISCUSS里面的数据. 题意 ...

  9. springmvc国际化 基于浏览器语言的国际化配置

    当前标签: springmvc   springmvc国际化 基于浏览器语言的国际化配置 苏若年 2013-10-09 13:03 阅读:305 评论:0   SpringMVC中应用Ajax异步通讯 ...

  10. C#制作高仿360安全卫士窗体3

    C#制作高仿360安全卫士窗体(三)   距上篇C#制作高仿360安全卫士窗体(二)也将近一个多月了,这个月事情还是像往常一样的多.不多我也乐在其中,毕竟我做的是我喜欢做的东西.今天特地抽空把怎么制作 ...