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

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

<!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. IntelliJ IDEA 发布13版本——创造java奇迹

    IntelliJ IDEA被公认为业界最好的Java开发平台.此次发布的了13版本,更是集合了与Java EE.Android.Spring.Scala和Gradle最新合作与支持. Java EE  ...

  2. C#用WebClient下载File时操作超时的问题

    原文:C#用WebClient下载File时操作超时的问题 今天很SB,被这个问题卡住了.那段代码也是网上找的.结果发现只能下载一个文件,第二次下载的时候就会出现“操作超时”的问题. 这个是原代码: ...

  3. EnterpriseLibrary 6.0(微软企业库6.0学习笔记) 之Data Access Block 配置和获取链接字符串

    EnterpriseLibrary 的特点是快速开发,融合了微软工程师多年的经验,现在在微软内部有专门的一个小组在完善EnterpriseLibray,最近的更新时间是April 2013. 相关链接 ...

  4. 【PLSQL】过程procedure形参和参数

    ************************************************************************   ****原文:blog.csdn.net/clar ...

  5. linux服务创建及jq配置服务列表查看

    1.应用背景 随着业务需求,后台处理服务不断增多,对于这些服务或后台程序的查看.更新操作越来越凌乱,所以我们首先需要一个服务列表查看工具,方便查看各 服务的端口.运行状态.jar包路径等等. 2.创建 ...

  6. Markdown 代码测试

    Mou Overview Mou, the missing Markdown editor for web developers. Syntax Strong and Emphasize strong ...

  7. 够快网盘支持与iOS-ASIHTTPRequest框架学习

    够快网盘支持与iOS-ASIHTTPRequest框架学习 前段时间在公司的产品中支持了够快网盘,用于云盘存储. 在这个过程中,学习到了很多新的知识,也遇到了很多问题,在此记录一下. 首先就够快的AP ...

  8. ios7学习之路七（隐藏虚拟键盘，解决键盘挡住UITextField问题）

    再正式开始之前,先来介绍一下IOS的键盘类型: 一.键盘风格 UIKit框架支持8种风格键盘 typedef enum { UIKeyboardTypeDefault, // 默认键盘:支持所有字符 ...

  9. Changing the working directory of VIM

    Sometimes we want to open another file in the same folder with current editing file, what we can do ...

  10. 什么是Numpy的ndarray

    什么是Numpy的ndarray 首先,Numpy的核心是ndarray. 然后,ndarray本质是数组,其不同于一般的数组,或者Python 的list的地方在于它可以有N 维(dimention ...