编程 Javascript

jquery动态添加删除一行数据示例

Posted in Javascript onJune 12, 2014

<html> 
<head> 
<title>添加、删除一行</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script> 
<script type="text/javascript"> 
$(function() { 
$("#addOneRow").click(function() { 
var tempTr = $("tr:first").clone(true); 
$("tr:last").after(tempTr); 
$("tr:last > td > #name").val("");//新添加行name为空 
$("tr:last > td > #address").val("");//新添加行address为空 
}); 
$(".delOneRow").click(function() { 
if ($("tr").length < 2) { 
alert("至少保留一行!"); 
} else { 
if (confirm("确认删除?")) { 
$(this).parent().parent().remove(); 
} 
} 
}); 
}); 
</script> 
</head> <body> 
<table border="1"> 
<tr> 
<td>姓名:</td> 
<td><input type="text" id="name" name="name" /> 
</td> 
<td>地址:</td> 
<td><input type="text" id="address" name="address" /></td> 
<td><input type="button" class="delOneRow" value="删除" /></td> 
</tr> 
</table> 
<input type="button" id="addOneRow" value="添加一行" /> 
</body> 
</html>

jquery动态添加删除一行数据示例

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery validate.js表单验证的基本用法入门

May 13 Javascript

ExtJS下书写动态生成的xml(兼容火狐)

Apr 02 Javascript

动态加载jquery库的方法

Feb 12 Javascript

jQuery DOM操作实例

Mar 05 Javascript

教你用AngularJS框架一行JS代码实现控件验证效果

Jun 23 Javascript

AngularJS中的按需加载ocLazyLoad示例

Jan 11 Javascript

BootStrap Datepicker 插件修改为默认中文的实现方法

Feb 10 Javascript

JavaScript门面模式详解

Oct 19 Javascript

AngularJS ui-router刷新子页面路由的方法

Jul 23 Javascript

vue自定义全局共用函数详解

Sep 18 Javascript

JavaScript实现简单轮播图效果

Dec 01 Javascript

jquery实现简单拖拽效果

Jul 20 jQuery

checkbox勾选判断代码分析

Jun 11 #Javascript

百度判断手机终端并自动跳转js代码及使用实例

Jun 11 #Javascript

js获取日期：昨天今天和明天、后天

Jun 11 #Javascript

js使用栈来实现10进制转8进制与取除数及余数

Jun 11 #Javascript

删除javascript中注释语句的正则表达式

Jun 11 #Javascript

Jquery自定义button按钮的几种方法

Jun 11 #Javascript

教你用jquery实现iframe自适应高度

Jun 11 #Javascript