JQ Table 增加 减少
更新:HHH   时间:2023-1-7


  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. <title>jQuery+JavaScript 实现 table 的增加和减少</title>  

  6. <script language="javascript" src="jquery-1.7.1.min.js"></script>  

  7. </head>  

  8. <body>  

  9.     <table border="0" width="800" style="border-collapse:collapse;" id="tb1">  

  10.         <tr>  

  11.             <td><input type="file" name="pic[]" /></td>  

  12.         </tr>  

  13.     </table>  

  14.     <input type="button" id="add" value="+" /> <input type="button" id="minus" value="-" /> <input type="button" id="empty" value="清空" />  

  15.     <script type="text/javascript">  

  16.         $("#add").click(function(){  

  17.             $("#tb1").append('<tr><td><input type="file" name="pic[]" /></td></tr>');  

  18.         })  

  19.         $("#minus").click(function(){  

  20.             var tbl_rows = Math.round((document.getElementById('tb1').rows.length));  

  21.             if(tbl_rows>1) dealTableRows('tb1', 0, 1);  

  22.         })  

  23.         $("#empty").click(function(){  

  24.             $("#tb1").empty();  

  25.         })  

  26.         function dealTableRows(tbl_id, opt, cellnum, str){  

  27.             var tblObj = document.getElementById(tbl_id);  

  28.             var newRow,newCell;  

  29.             switch(opt){  

  30.                 case 1:/* 增加一行 */  

  31.                     newRow = tblObj.insertRow(tblObj.rows.length);  

  32.                     for(var i=0; i<cellnum; i++){  

  33.                         newCell = newRow.insertCell(newRow.cells.length);  

  34.                         newCell.innerHTML = str[i];  

  35.                     }  

  36.                     break ;  

  37.                 default :  

  38.                     for(var j=0;j<cellnum;j++){  

  39.                         tblObj.deleteRow(tblObj.rows.length-1);      

  40.                     }              

  41.                     break ;  

  42.             }  

  43.         }  

  44.     </script>  

  45. </body>  

  46. </html>  


返回web开发教程...