jQuery实现表格行的动态增加与删除(改进版)
生活随笔
收集整理的這篇文章主要介紹了
jQuery实现表格行的动态增加与删除(改进版)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
之前寫過一個簡單的利用jQuery實現表格行的動態增加與刪除的例子，有些人評論說"如果表格中是input元素，那么刪除后的東西都將自動替換，這樣應該是有問題的，建議樓主改進！"，故特意改進了一下！
在項目中很多時候遇到這樣的問題,需要動態的增加、刪除表格的行，很多情況下我們都是在頁面來設置一個隱藏域的值，然后在js方法里動態的++或--，在學習jQuery的過程中，我試著用簡單的方法來模擬實現這一個過程
效果圖如下：
刪除之前
刪除2行后：
改進后具體代碼如下：
?2<html?xmlns="http://www.w3.org/1999/xhtml">
?3<head>
?4<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
?5<script?type="text/javascript"?src="jquery-1.3.1.js"></script>
?6<title></title>
?7<script>
?8????$(document).ready(function(){
?9????????//<tr/>居中
10????????$("#tab?tr").attr("align","center");
11????????
12????????//增加<tr/>
13????????$("#but").click(function(){
14????????????var?_len?=?$("#tab?tr").length;????????
15????????????$("#tab").append("<tr?id="+_len+"?align='center'>"
16????????????????????????????????+"<td>"+_len+"</td>"
17????????????????????????????????+"<td>Dynamic?TR"+_len+"</td>"
18????????????????????????????????+"<td><input?type='text'?name='desc"+_len+"'?id='desc"+_len+"'?/></td>"
19????????????????????????????????+"<td><a?href=\'#\'?οnclick=\'deltr("+_len+")\'>刪除</a></td>"
20????????????????????????????+"</tr>");????????????
21????????})????
22????})
23????
24????//刪除<tr/>
25????var?deltr?=function(index)
26????{
27????????var?_len?=?$("#tab?tr").length;
28????????$("tr[id='"+index+"']").remove();//刪除當前行
29????????for(var?i=index+1,j=_len;i<j;i++)
30????????{
31????????????var?nextTxtVal?=?$("#desc"+i).val();
32????????????$("tr[id=\'"+i+"\']")
33????????????????.replaceWith("<tr?id="+(i-1)+"?align='center'>"
34????????????????????????????????+"<td>"+(i-1)+"</td>"
35????????????????????????????????+"<td>Dynamic?TR"+(i-1)+"</td>"
36????????????????????????????????+"<td><input?type='text'?name='desc"+(i-1)+"'?value='"+nextTxtVal+"'?id='desc"+(i-1)+"'/></td>"
37????????????????????????????????+"<td><a?href=\'#\'?οnclick=\'deltr("+(i-1)+")\'>刪除</a></td>"
38????????????????????????????+"</tr>");
39????????}????
40????????
41????}
42</script>
43</head>
44<body>
45????
46????<table?id="tab"?border="1"?width="60%"?align="center"?style="margin-top:20px">
47????????<tr>
48????????????<td?width="20%">序號</td>
49????????????<td>標題</td>
50????????????<td>描述</td>
51????????????<td>操作</td>
52???????</tr>
53????</table>
54????<div?style="border:2px;?
55????????????????border-color:#00CC00;?
56????????????????margin-left:20%;
57????????????????margin-top:20px">
58????????<input?type="button"?id="but"?value="增加"/>
59????</div>
60</body>
61</html>
轉載于:https://www.cnblogs.com/snowhite/p/9676030.html
總結
以上是生活随笔為你收集整理的jQuery实现表格行的动态增加与删除(改进版)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： word论文各类对齐终极解决方法——制表
- 下一篇： 计算机专业技能考核方案,计算机专业技能课