jquery 表格的增行刪行實(shí)現(xiàn)思路
更新時(shí)間：2013年03月21日 14:35:38 作者：
表格增行刪行一般情況下都是通過(guò)修改html結(jié)構(gòu)實(shí)現(xiàn)的，接下來(lái)為大家介紹下如何使用jquery實(shí)現(xiàn)表格增行刪行，感興趣的各位可不要錯(cuò)過(guò)了哈
在做后臺(tái)中遇到的情況，分享下
<!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; //要顯示的條數(shù)
var count = $("input:text").val(); //遞增的開(kāi)始值，這里是你的ID
var fin_count = parseInt(count) + (show_count-1); //結(jié)束遞增的條件
$("#btn_addtr").click(function(){
if(count < fin_count) //點(diǎn)擊時(shí)候，如果當(dāng)前的數(shù)字小于遞增結(jié)束的條件
{
$("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>
復(fù)制代碼 代碼如下:
<!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; //要顯示的條數(shù)
var count = $("input:text").val(); //遞增的開(kāi)始值，這里是你的ID
var fin_count = parseInt(count) + (show_count-1); //結(jié)束遞增的條件
$("#btn_addtr").click(function(){
if(count < fin_count) //點(diǎn)擊時(shí)候，如果當(dāng)前的數(shù)字小于遞增結(jié)束的條件
{
$("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>
相關(guān)文章
JQuery實(shí)現(xiàn)簡(jiǎn)單時(shí)尚快捷的氣泡提示插件
在程序提交后，為了提高用戶體驗(yàn)我們需要驗(yàn)證并提示出錯(cuò)的位置，利用JQuery我們可以輕松實(shí)現(xiàn)氣泡提示，需要的朋友可以了解下2012-12-12
jQuery初識(shí)之設(shè)計(jì)思想方法函數(shù)示例
這篇文章主要為大家介紹了jQuery初識(shí)之設(shè)計(jì)思想及方法函數(shù)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
jQuery中noConflict()用法實(shí)例分析
這篇文章主要介紹了jQuery中noConflict()用法,實(shí)例分析了noConflict()的功能、定義及相關(guān)使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery表格排序組件-tablesorter的使用,需要的朋友可以參考下2014-05-05
jQuery操作選中select下拉框的值代碼實(shí)例
這篇文章主要介紹了jQuery操作選中select下拉框的值代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
jquery+css實(shí)現(xiàn)側(cè)邊導(dǎo)航欄效果
這篇文章主要為大家詳細(xì)介紹了jquery+css實(shí)現(xiàn)側(cè)邊導(dǎo)航欄效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
本篇文章主要是對(duì)jquery遍歷select元素的實(shí)例進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
jquery+ajax驗(yàn)證不通過(guò)也提交表單問(wèn)題處理
這篇文章主要介紹了jquery validationEngine中使用ajax驗(yàn)證不通過(guò)也提交表單問(wèn)題處理,需要的朋友可以參考下2014-12-12
jQuery下的動(dòng)畫(huà)處理總結(jié)
最近一年多一直在做前端的東西，由于老板在追求一些年輕動(dòng)感的效果，讓頁(yè)面元素不能僅僅是簡(jiǎn)單的隱藏顯示，所以經(jīng)常會(huì)使用一些動(dòng)畫(huà)效果，發(fā)現(xiàn)jQuery的動(dòng)畫(huà)真心好用啊，把常用的幾個(gè)總結(jié)一下，希望不再每次使用的時(shí)候還去翻API2013-10-10
把jquery 的dialog和ztree結(jié)合實(shí)現(xiàn)步驟
首先準(zhǔn)備好juqury-ui、ztree 的js文件和css 文件，接下來(lái)的步驟祥看本文希望對(duì)大家有所幫助2013-08-08