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

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

<!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. 【转】十款让 Web 前端开发人员更轻松的实用工具

    这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...

  2. 无线连接手机进行Android测试

    当每天走到哪都要拿一根数据线进行项目测试的时候,总是有一些焦急和烦躁的,如果能够无线连接测试就在好不过了. 这样不再是什么难事了,只需要几步走: 在进行无线连接测试的过程中,你的手机必须root了,这 ...

  3. Xamarin.Android

    Xamarin.Android之使用百度地图起始篇 一.前言 如今跨平台开发层出不穷,而对于.NET而言时下最流行的当然还是Xamarin,不仅仅能够让我们在熟悉的Vs下利用C#开发,在对原生态类库的 ...

  4. 一步一步实现基于Task的Promise库（四）无参数的WorkItem

    接着上一篇我直接给出代码,现在支持了new Task(), then(), all(), any() 这些不传参的调用方式. (function(){ var isFunction = functio ...

  5. Memcached快递上手之C#

    Memcached快递上手之C# Memcached是开源高性能分布式缓存组件,目前已经广泛应用各类互联网领域. 具有多种语言的客户端开发包,包括:Perl/PHP/JAVA/C/Python/Rub ...

  6. iOS基础 - Modal展示控制器

    一.利用Modal形式展示控制器 1.如何展示 // vc就是要展示的新控制器 [self presentViewController:vc animated:YES completion:^{ NS ...

  7. 【GitHub】在Mac上配置/使用Github

    以前一直听说过Github,但是自己一直不会用.最近不是太忙,于是想捣鼓捣鼓Github,没想到用了将近3个小时,才在Mac上配置成功. 首先简单介绍一下Git和Github 集中化的版本控制系统( ...

  8. 迟到的 WPF 学习 —— 控件

    这一章书中内容比较多而杂,但每个对象的内容又相对简短,所以只挑选里边有代表性的内容做记录. 1. Label 控件:一个基础的简单的 ContentControl,Labe 支持快捷键文本的设置,可以 ...

  9. 自动生成Code First代码

    自动生成Code First代码 在前面的文章中我们提到Entity Framework的“Code First”模式也同样可以基于现有数据库进行开发.今天就让我们一起看一下使用Entity Fram ...

  10. iOS 开发之Target-action模式

    Target-action:目标-动作模式,它贯穿于iOS开发始终.但是对于初学者来说,还是被这种模式搞得一头雾水. 其实Target-action模式很简单,就是当某个事件发生时,调用那个对象中的那 ...