编程 Javascript

jquery 表格的增行删行实现思路

Posted in Javascript onMarch 21, 2013

在做后台中遇到的情况，分享下

<!DOCTYPE html> 
<html> 
<head> 
<title>表格增行，删行处理</title> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery"></script> 
</head> 
<body> 
<script> 
$(function(){ 
var show_count = 20; //要显示的条数 
var count = $("input:text").val(); //递增的开始值，这里是你的ID 
var fin_count = parseInt(count) + (show_count-1); //结束递增的条件 
$("#btn_addtr").click(function(){ 
if(count < fin_count) //点击时候，如果当前的数字小于递增结束的条件 
{ 
$("tr:eq(1)").clone().appendTo("table"); //在表格后面添加一行 
$("tr:last td input:first").val(++count); //改变添加的行的ID值。 
} 
}); 
}); 
function deltr(){ 
var length=$("tr").length; 
if(length<=2){ 
alert("至少保留一行"); 
}else{ 
$("tr:last").remove(); 
} 
} 
</script> 
<input type="button" id="btn_addtr" value="增行"> 
<table id="dynamicTable" width="700" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td height="30" align="center" bgcolor="#CCCCCC">ID</td> 
<td align="center" bgcolor="#CCCCCC">Username</td> 
<td align="center" bgcolor="#CCCCCC">Usertype</td> 
<td align="center" bgcolor="#CCCCCC">Other</td> 
<td></td> 
</tr> 
<tr> 
<div style="background:#ccc;"> 
<td height="30" align="center"><input type="text" size="2" value="1" /></td> 
<td align="center"><input type="text" name="username" /></td> 
<td align="center"> 
<select name="type"> 
<option value="1">Administrator</option> 
<option value="2">Guest</option> 
</select> 
</td> 
<td align="center"><input type="text" name="username2" /></td> 
<td><input type="button" id="btn_deltr" onclick="deltr()" value="删行"></td> 
</div> 
</tr> 
</table> 
</body> 
</html>

jquery 表格的增行删行实现思路

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

Javascript 相关文章推荐

JQuery的$命名冲突详细解析

Dec 28 Javascript

js/jquery解析json和数组格式的方法详解

Jan 09 Javascript

jquery ajax跨域解决方法(json方式)

Feb 04 Javascript

javascript实现百度地图鼠标滑动事件显示、隐藏

Apr 02 Javascript

JavaScript每天定时更换皮肤样式的方法

Jul 01 Javascript

angular.js + require.js构建模块化单页面应用的方法步骤

Jul 19 Javascript

JS中Promise函数then的奥秘探究

Jul 30 Javascript

微信小程序调用远程接口给全局数组赋值代码实例

Aug 13 Javascript

使用Vue生成动态表单

Nov 26 Javascript

js实现列表向上无限滚动

Jan 13 Javascript

JavaScript实现世界各地时间显示

Sep 07 Javascript

JS实现4位随机验证码

Oct 19 Javascript

杨氏矩阵查找的JS代码

Mar 21 #Javascript

JavaScript 判断浏览器是否支持SVG的代码

Mar 21 #Javascript

js禁止document element对象选中文本实现代码

Mar 21 #Javascript

JS获取并操作iframe中元素的方法

Mar 21 #Javascript

jQuery页面图片伴随滚动条逐渐显示的小例子

Mar 21 #Javascript

js 验证密码强弱的小例子

Mar 21 #Javascript

javascript中日期转换成时间戳的小例子

Mar 21 #Javascript