jquery html操作CURD

clone() .insertBefore, insertAfter 交换html

Java代码  

1. var arr = new Array();  
2. arr.push('<div>');  
3. arr.push('html test');  
4. arr.push('</div>');  
5. alert(arr.join(''));  

优点不需要与后台交互，缺点用js处理临时数据时，不能刷心页面，否则数据会丢失

页面

Java代码  

1. <input type="button" name="a" value="添加" onclick="addCardDetail()" class="button">  
2. <div id="details_1" class="explain-col">                  
3.     <label for="prefix_1">前缀:</label>  
4.     <input type="text" name="detail[1][prefix]" id='prefix_1' size="5" class="input-text">  
5.     <label for="begin_1">开始编号:</label>        
6.     <input type="text" name="detail[1][start_sn]" id='begin_1' size="5" class="input-text">  
7.     <label for="end_1">结束编号:</label>  
8.     <input type="text" name="detail[1][end_sn]" id='end_1' size="5" class="input-text">   
9.     <input type="button" value="删除" onclick="deletePurchaseDetail(1)" class="button">     
10. </div>       

 js

Java代码  

1. <script>  
2.     function addCardDetail() {  
3.         lastIdAttr = $("div[id^='details_']").last().attr('id');    //最后一行的id的值  
4.   
5.         strIndex = lastIdAttr.lastIndexOf('_') + 1; //取得id中数字的位置号  
6.         index = parseInt(lastIdAttr.substring(strIndex)) + 1;//待增加的序号  
7.   
8.         total = $("div[id^='details_']").size();  
9.         if (total < 10) {  
10.             var html = [  
11.                 '<div id="details_' + index + '" class="explain-col">',  
12.                 '<label for="prefix_' + index + '">前缀:</label>',  
13.                 '<input type="text" name="detail[' + index + '][prefix]" id="prefix_' + index + '" size="5" class="input-text">',  
14.                 '<label for="begin_' + index + '">开始编号:</label>',  
15.                 '<input type="text" name="detail[' + index + '][start_sn]" id="begin_' + index + '" size="5" class="input-text">',  
16.                 '<label for="end_' + index + '">结束编号:</label>',  
17.                 '<input type="text" name="detail[' + index + '][end_sn]" id="end_' + index + '" size="5" class="input-text">',  
18.                 '<input type="button" value="删除" onclick="deletePurchaseDetail(' + index + ')" class="button">',  
19.                 '</div>'  
20.             ].join('');  
21.             $(html).insertAfter("#" + lastIdAttr);  
22.         }  
23.     }  
24.   
25.     function deletePurchaseDetail(i) {  
26.         len = $("div[id^='details_']").size();  
27.         if (len > 1 && window.confirm("确认删除本行")) {  
28.             $("#details_" + i).remove();  
29.         } else {  
30.             alert('明细信息必须保留一行');  
31.         }  
32.     }  
33. </script>