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

javascript延时重复执行函数 lLoopRun.js

Jun 29 Javascript

用JavaScript实现UrlEncode和UrlDecode的脚本代码

Jul 23 Javascript

加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)

Jun 26 Javascript

javascript通过获取html标签属性class实现多选项卡的方法

Jul 27 Javascript

关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法

Jun 30 Javascript

AngularJS基础 ng-copy 指令实例代码

Aug 01 Javascript

React实现双向绑定示例代码

Sep 19 Javascript

JavaScript递归操作实例浅析

Oct 31 Javascript

Vue与Node.js通过socket.io通信的示例代码

Jul 25 Javascript

iview Upload组件多个文件上传的示例代码

Sep 30 Javascript

JavaScript实现无限级递归树的示例代码

Mar 29 Javascript

使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部

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