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

JS 统计时间

Mar 09 Javascript

JS 时间显示效果代码

Aug 23 Javascript

javascript Window及document对象详细整理

Jan 12 Javascript

JavaScript控制listbox列表框的项目上下移动的方法

Mar 18 Javascript

js操作数组函数实例小结

Dec 10 Javascript

可输入文字查找ajax下拉框控件 ComBox的实现方法

Oct 25 Javascript

jQuery+json实现动态创建复杂表格table的方法

Oct 25 Javascript

详解webpack模块化管理和打包工具

Apr 21 Javascript

vue中多路由表头吸顶实现的几种布局方式

Apr 12 Javascript

vue setInterval 定时器失效的解决方式

Jul 30 Javascript

浅谈JavaScript中等号、双等号、三等号的区别

Aug 06 Javascript

vue 使用原生组件上传图片的实例

Sep 08 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