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

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

<!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. Android正在使用Handler实现消息分发机制（两）

    在开始这篇文章之前,.首先,我们在总结前两篇文章Handler, Looper和MessageQueue像一些关键点: 0)在创建线程Handler之前,你必须调用Looper.prepare(), ...

  2. PHP专业开发IDE——Zend Studio 10.5预览版发布

    Zend Studio是新一代的PHP IDE,高效的开发和维护PHP代码是它的核心.Zend公司目前已发布了Zend Studio 10.5预览版,预览版中提高了快速响应能力和时时误差检查.因此使用 ...

  3. js 图片点击放大功能

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. leetcode[91] Subsets II

    给定一个数组,返回所有的非重复的可能.例如给定 If S = [1,2,2], a solution is: [ [2], [1], [1,2,2], [2,2], [1,2], [] ] 其实这题类 ...

  5. 宿主机跟Vmware中的linux使用host-only，bridge 方式通信

    声明:我的机器在本文中叫 宿机,vmware中的linux就叫linux 本文已经实现了通过host-only模式 宿机 ping通 linux,但是在host-only模式下,linux 没有pin ...

  6. 30个HTML初学者建议

    The most difficult aspect of running Nettuts+ is accounting for so many different skill levels. If w ...

  7. [问题]安装express，已经加了-g，还是找不到express命令

    安装express时使用如下命令: npm install -g express 但是在命令行还是找不到express 手动将路径D:\Program Files (x86)\nodejs\node_ ...

  8. 关于ADO.NET参数化查询的提问

    最近我们的正式环境一直在报错一个异常,首先我贴出来异常信息 BLL层 捕获到了请求的url Net.BLL.MobileFun MobileFun.GetBusinessBidPolicy 异常 传入 ...

  9. C# 4.0 Parallel

    C# 4.0 并行计算部分   沿用微软的写法,System.Threading.Tasks.::.Parallel类,提供对并行循环和区域的支持. 我们会用到的方法有For,ForEach,Invo ...

  10. ASP.Net页面传值比较

    ASP.Net页面传值比较   作为一个ASP.Net程序员,尤其是搞B/S开发的,对于不同页面之间变量值的传递用的非常广泛,而掌握不同方式之间的区别和特点也就很有必要.本文将针对这一知识点做一个简单 ...