编程 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 相关文章推荐

JS俄罗斯方块，包含完整的设计理念

Dec 11 Javascript

Javascript 计算字符串在localStorage中所占字节数

Oct 21 Javascript

JavaScript实现图片自动加载的瀑布流效果

Apr 11 Javascript

JS定时检测任务任务完成后执行下一步的解决办法

Dec 22 Javascript

javascript内存分配原理实例分析

Apr 10 Javascript

JavaScript实现选中文字提示新浪微博分享效果

Jun 15 Javascript

vue脚手架及vue-router基本使用

Apr 09 Javascript

浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

Jul 24 Javascript

JavaScript 事件代理需要注意的地方

Sep 08 Javascript

EXTJS7实现点击拖拉选择文本

Dec 17 Javascript

vscode中使用npm安装babel的方法

Aug 02 Javascript

vue router 动态路由清除方式

May 25 Vue.js

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