jquery 表格的增行删行实现思路
更新时间：2013年03月21日 14:35:38 作者：
表格增行删行一般情况下都是通过修改html结构实现的，接下来为大家介绍下如何使用jquery实现表格增行删行，感兴趣的各位可不要错过了哈
在做后台中遇到的情况，分享下
<!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>
复制代码 代码如下:
<!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我们可以轻松实现气泡提示，需要的朋友可以了解下2012-12-12
这篇文章主要为大家介绍了jQuery初识之设计思想及方法函数示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了jQuery中noConflict()用法,实例分析了noConflict()的功能、定义及相关使用技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jQuery表格排序组件-tablesorter的使用,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery操作选中select下拉框的值代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了jquery+css实现侧边导航栏效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
本篇文章主要是对jquery遍历select元素的实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了jquery validationEngine中使用ajax验证不通过也提交表单问题处理,需要的朋友可以参考下2014-12-12
最近一年多一直在做前端的东西，由于老板在追求一些年轻动感的效果，让页面元素不能仅仅是简单的隐藏显示，所以经常会使用一些动画效果，发现jQuery的动画真心好用啊，把常用的几个总结一下，希望不再每次使用的时候还去翻API2013-10-10
首先准备好juqury-ui、ztree 的js文件和css 文件，接下来的步骤祥看本文希望对大家有所帮助2013-08-08
最新评论