在做后台中遇到的情况,分享下
复制代码 代码如下:
<!DOCTYPE html>
<html>
<head>
<title>表格增行,删行处理</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery"></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="/UploadFiles/2021-04-02/jquery"></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>
标签:
表格,增行,删行
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“jquery 表格的增行删行实现思路”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年11月14日
2024年11月14日
- 黑鸭子2003《聆听柔情HQCD》[日本版][WAV+CUE]
- 群星《奔赴!万人现场 第5期》[FLAC/分轨][587.07MB]
- 关大洲《国家宝藏 第四季原声音乐 关大洲作品》[320K/MP3][109.49MB]
- 关大洲《国家宝藏 第四季原声音乐 关大洲作品》[FLAC/分轨][527.23MB]
- LOL双城之战大乱斗什么时候更新 双城大乱斗上线更新时间介绍
- s14全球总决赛冠军皮肤有什么 2024T1冠军皮肤选择一览
- faker加里奥s14决赛什么出装 faker加里奥s14决赛出装介绍
- 《马里奥与路易吉RPG:兄弟齐航》Fami通34分:路易吉存在感拉满
- 数据挖掘者新发现:NS继任机型或支持4K分辨率
- 宫本茂谈任天堂未来:研发费用增加但注重创意与传承
- 陈小云.2000-餐厅综艺金榜【海丽唱片】【WAV+CUE】
- 卓文萱.2008-翻滚吧!蛋炒饭电视原声带【滚石】【FLAC分轨】
- 顺子.2001-AND.MUSICS.THERE【EMI百代】【WAV+CUE】
- 《三国志8重置版》劝降机制介绍
- 《欢欣森活》最新官方配置要求一览