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

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

<!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. 使用Python改写的身份证信息查询小程序

    花了几天时间过了一遍python基础.真心感觉python让世界充满了爱…先简单的使用一下python好了,拿以前写的<C语言身份证信息查询系统(修改版)>开刀~ 很多东西,不需要考虑C语 ...

  2. SSMS2008插件开发(3)--部署调试SSMS2008插件

    原文:SSMS2008插件开发(3)--部署调试SSMS2008插件 上一次说到VS2008中的插件开发,最终结果插件是部署在VS2008中,现在我们将插件部署到SSMS2008(Microsoft ...

  3. Andy Williams 《Love Story》

    where do i beginto tell a story of how great a love can bethe sweet love story that is older than th ...

  4. zxing二维码扫描的流程简析（Android版）

    目前市面上二维码的扫描似乎用开源google的zxing比较多,接下去以2.2版本做一个简析吧,勿喷... 下载下来后定位两个文件夹,core和android,core是一些核心的库,android是 ...

  5. 【分享】LateX排版软件学习教程合集

    来源于:http://www.hejizhan.com/html/xueke/416/x416_13.html  LATEX2e科技排版指南.pdf 8.3 MB  An Example LaTeX ...

  6. MVC使用RDL报表

    MVC使用RDL报表 这次我们来演示MVC3怎么显示RDL报表,坑爹的微软把MVC升级到5都木有良好的支持报表,让MVC在某些领域趋于短板 我们只能通过一些方式来使用rdl报表. Razor视图不支持 ...

  7. oracle导入数据

    oracle导入数据时候注意点: 1.imp system/admin@oracle9i file=E:\shujukuwenjian\2014-04-01.dmp fromuser=ptb_supe ...

  8. 使用Repository模式构建数据库访问层

    使用Repository模式构建数据库访问层 使用ASP.NET Web Api构建基于REST风格的服务实战系列教程[二]——使用Repository模式构建数据库访问层 系列导航地址http:// ...

  9. Swift之函数语法详解

    函数 函数是用来完成特定任务的独立的代码块.你给一个函数起一个合适的名字,用来标识函数做什么,并且当函数需要执行的时候,这个名字会被“调用”. Swift 统一的函数语法足够灵活,可以用来表示任何函数 ...

  10. Orchard中的Host和Tenant

      Orchard的多个子站点特性 Orchard中可以支持多个子站点.当你运行Orchard的时候,通常一个网站运行在一个应用程序域中.这也是一般ASP.NET应用程序区分两个网站的方法,也就是说两 ...