隨筆-16 
評(píng)論-84 
文章-1 
trackbacks-0

          
	

          

          
	
					


          
	
	之前寫(xiě)過(guò)一個(gè)簡(jiǎn)單的利用jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除的例子，有些人評(píng)論說(shuō)"如果表格中是input元素，那么刪除后的東西都將自動(dòng)替換，這樣應(yīng)該是有問(wèn)題的，建議樓主改進(jìn)！"，故特意改進(jìn)了一下！
          

          
在項(xiàng)目中很多時(shí)候遇到這樣的問(wèn)題,需要?jiǎng)討B(tài)的增加、刪除表格的行，很多情況下我們都是在頁(yè)面來(lái)設(shè)置一個(gè)隱藏域的值，然后在js方法里動(dòng)態(tài)的++或--，在學(xué)習(xí)jQuery的過(guò)程中，我試著用簡(jiǎn)單的方法來(lái)模擬實(shí)現(xiàn)這一個(gè)過(guò)程
          

          
效果圖如下：
          

          
刪除之前
          

          
刪除2行后：
          

          

          
改進(jìn)后具體代碼如下：
          

           1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          
           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=\'#\' onclick=\'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();//刪除當(dāng)前行
          
          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=\'#\' onclick=\'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%">序號(hào)</td>
          
          49            <td>標(biāo)題</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>
          
          62
          

          

          

          
源代碼下載：Dynamic Table Column Operate
 
	
          posted on 2009-03-13 10:41 absolute 閱讀(84155) 評(píng)論(25)  編輯  收藏  所屬分類: JavaScript 
          

          







          
	    
    


          
評(píng)論:

          
	

		
          
			
          
			# re: jQuery學(xué)習(xí)  表格行的動(dòng)態(tài)增加和刪除簡(jiǎn)單實(shí)現(xiàn)
				2009-03-13 11:52 | Rique
          
				
          剛開(kāi)始看JQuery，學(xué)習(xí)了！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery學(xué)習(xí)  表格行的動(dòng)態(tài)增加和刪除簡(jiǎn)單實(shí)現(xiàn)
				2009-03-13 12:58 | YXY
          
				
          很好,值得學(xué)習(xí)~~~~  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery學(xué)習(xí)  表格行的動(dòng)態(tài)增加和刪除簡(jiǎn)單實(shí)現(xiàn)
				2009-03-13 13:31 | Jie
          
				
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery學(xué)習(xí)  表格行的動(dòng)態(tài)增加和刪除簡(jiǎn)單實(shí)現(xiàn)[未登錄](méi)
				2009-06-07 11:15 | jiery
          
				
          這個(gè)做的很好啊！

          但是如何把它里面的數(shù)據(jù)保存呢？  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery學(xué)習(xí)  表格行的動(dòng)態(tài)增加和刪除簡(jiǎn)單實(shí)現(xiàn)
				2009-07-28 14:16 | 網(wǎng)的
          
				
          你這個(gè)好像只是刪除最后一行啊

            回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery學(xué)習(xí)  表格行的動(dòng)態(tài)增加和刪除簡(jiǎn)單實(shí)現(xiàn)
				2010-01-04 16:49 | 匆匆過(guò)客
          
				
          很好，學(xué)習(xí)了！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery學(xué)習(xí)  表格行的動(dòng)態(tài)增加和刪除簡(jiǎn)單實(shí)現(xiàn)[未登錄](méi)
				2010-01-06 14:13 | 過(guò)客
          
				
          如果表格中是input元素，那么刪除后的東西都將自動(dòng)替換，這樣應(yīng)該是有問(wèn)題的，建議樓主改進(jìn)！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery學(xué)習(xí)  表格行的動(dòng)態(tài)增加和刪除簡(jiǎn)單實(shí)現(xiàn)
				2010-01-17 10:51 | accelerator
          
				
          這種寫(xiě)法不好維護(hù)吧  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2010-11-20 14:26 | iowen
          
				
          @過(guò)客

          

          已經(jīng)改進(jìn)，謝謝  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2011-08-02 11:49 | 35法國(guó)高規(guī)格
          
				
          臺(tái)灣何時(shí)。。。。。  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2012-03-01 17:31 | 上海
          
				
          受益匪淺，謝謝  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2012-04-25 17:09 | 小賽
          
				
          @網(wǎng)的

          同感，哥們！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2012-07-13 16:35 | wanglc
          
				
          不是只刪除最后一行，是刪除之后編號(hào)依次替換，很快看不見(jiàn)而已
            回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)[未登錄](méi)
				2013-01-30 11:44 | Nick
          
				
          為什么我做的時(shí)候，把表頭覆蓋掉了？  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)[未登錄](méi)
				2013-01-30 11:45 | Nick
          
				
          是不是要用insertAfter?  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)[未登錄](méi)
				2013-02-19 22:35 | aa
          
				
          這個(gè)代碼為什么我烤下來(lái)不能執(zhí)行呢

            回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2013-05-13 12:29 | Zjmainstay
          
				
          我也有一個(gè)。
          jQuery動(dòng)態(tài)增刪改查表格信息，可左鍵/右鍵提示（原創(chuàng)自Zjmainstay）
          http://www.cnblogs.com/Zjmainstay/archive/2012/07/31/jQuery_AutoAddDeleteTableTr.html  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2013-05-14 10:29 | ioio_Carl
          
				
          刪除一行的時(shí)候，input的值可以像你這樣傳過(guò)去，但是我想請(qǐng)問(wèn)那如果是select的值那要怎么傳呢？謝謝！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2013-05-14 10:30 | ioio_Carl
          
				
          @ioio_Carl
          方便的話可以麻煩您發(fā)郵件告訴我嗎？ahjun30@hotmail.com，萬(wàn)分感謝  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2013-05-14 11:43 | ioio_Carl
          
				
          @ioio_Carl
          好吧。我知道了。參考這篇文章～
          http://www.offid.cn/i/564/note/100470.html
          就是
          $("#select_id").val();  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2013-08-12 12:38 | 游客X
          
				
            $("tr[id=\'"+i+"\']")
          這里邊不需要轉(zhuǎn)義吧？  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2013-08-12 12:39 | 游客X
          
				
          @游客X
          $("tr[id="+i+"]") 就可以了  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# 000[未登錄](méi)
				2014-03-06 14:04 | 123
          
				
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)
				2014-10-07 23:52 | feicoo
          
				
          正好幫我解決一個(gè)難題，謝謝?。。?nbsp; 回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          
			# re: jQuery實(shí)現(xiàn)表格行的動(dòng)態(tài)增加與刪除(改進(jìn)版)[未登錄](méi)
				2014-10-16 15:19 | s
          
				
			
          
			
			
		
          
	








          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網(wǎng)站導(dǎo)航:
		
		
          
		
          
			


		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				

          







    







          
        
	




主站蜘蛛池模板：
英山县|
衡阳市|
凯里市|
隆尧县|
嘉义县|
舞钢市|
青神县|
宜黄县|
柳江县|
清水县|
平遥县|
泗洪县|
鹿泉市|
平塘县|
泽普县|
云梦县|
旌德县|
贡山|
鹤壁市|
金华市|
普陀区|
乌鲁木齐县|
诸城市|
宁国市|
兰溪市|
双牌县|
清水县|
城固县|
三亚市|
新蔡县|
通山县|
井研县|
龙川县|
牟定县|
越西县|
南宁市|
水城县|
竹山县|
桃园市|
巴南区|
五指山市|