使用jQuery操纵表格-增加、删除行和列

最新推荐文章于 2021-06-05 03:53:03 发布

zh521zh

最新推荐文章于 2021-06-05 03:53:03 发布

阅读量372

点赞数

 
 <!DOCTYPE html PUBLIC  
 "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 > 
 
 <html xmlns= 
 "http://www.w3.org/1999/xhtml" 
 > 
 
 <head> 
 
 <meta http-equiv= 
 "Content-Type" 
  content= 
 "text/html; charset=gb2312" 
  /> 
 
 <style type= 
 "text/css" 
 > 
 
 .cl1{ 
 
      
 background-color: 
 #FFFFFF; 
 
 } 
 
 .cl2{ 
 
      
 background-color: 
 #FFFF99; 
 
 } 
 
 </style> 
 
 <script type= 
 "text/javascript" 
  src= 
 "css_js/jquery/jquery-1.3.2.min.js" 
 ></script> 
 
 <script type= 
 "text/javascript" 
 > 
 
      
 var 
  rowCount = 0; 
 
      
 var 
  colCount = 2; 

    
 
      
 function 
  addRow(){ 
 
          
 rowCount++; 
 
          
 var 
  rowTemplate =  
 '<tr class="tr_' 
 +rowCount+ 
 '"><td>' 
 +rowCount+ 
 '</td><td class="cl1">内容' 
 +rowCount+ 
 '</td><td class="cl1"><a href="#" onclick=delRow(' 
 +rowCount+ 
 ')>删除</a></td></tr>' 
 ; 
 
          
 var 
  tableHtml = $( 
 "#testTable tbody" 
 ).html(); 
 
          
 tableHtml += rowTemplate; 
 
          
 $( 
 "#testTable tbody" 
 ).html(tableHtml); 
 
      
 } 

    
 
      
 function 
  delRow(_id){ 
 
          
 $( 
 "#testTable .tr_" 
 +_id).hide(); 
 
          
 rowCount--; 
 
      
 } 

    
 
      
 function 
  addCol(){ 
 
          
 colCount++; 
 
          
 $( 
 "#testTable tr" 
 ).each( 
 function 
 (){ 
 
               
 
              
 var 
  trHtml = $( 
 this 
 ).html(); 
 
              
 trHtml +=  
 '<td onclick="delCol(' 
 +colCount+ 
 ')">增加的td</td>' 
 ; 
 
              
 $( 
 this 
 ).html(trHtml); 
 
          
 }); 

    
 
      
 } 

    
 
      
 function 
  delCol(_id){ 
 
           
 
          
 $( 
 "#testTable tr" 
 ).each( 
 function 
 (){ 
 
              
 $( 
 "td:eq(" 
 +_id+ 
 ")" 
 , 
 this 
 ).hide();            
 
          
 }); 
 
          
 colCount--; 
 
      
 } 

    
 
      
 function 
  mover(_id){ 
 
          
 $( 
 "#testTable tr:not(:first)" 
 ).each( 
 function 
 (){ 
 
              
 $( 
 "td:eq(" 
 +_id+ 
 ")" 
 , 
 this 
 ).removeClass( 
 "cl1" 
 ); 
 
              
 $( 
 "td:eq(" 
 +_id+ 
 ")" 
 , 
 this 
 ).addClass( 
 "cl2" 
 ); 
 
          
 }); 
 
      
 } 

    
 
      
 function 
  mout(_id){ 
 
          
 $( 
 "#testTable tr:not(:first)" 
 ).each( 
 function 
 (){ 
 
              
 $( 
 "td:eq(" 
 +_id+ 
 ")" 
 , 
 this 
 ).removeClass( 
 "cl2" 
 ); 
 
              
 $( 
 "td:eq(" 
 +_id+ 
 ")" 
 , 
 this 
 ).addClass( 
 "cl1" 
 ); 
 
          
 }); 
 
      
 } 
 
 </script> 
 
 <title>jquery操作表格测试</title> 
 
 </head> 
 
 <body> 
 
      
 <table id= 
 "testTable" 
  border= 
 "1" 
  width= 
 "500" 
 > 
 
          
 <tr> 
 
              
 <td>序号</td> 
 
              
 <td onmouseover= 
 "mover(1);" 
  onmouseout= 
 "mout(1);" 
 >内容</td> 
 
              
 <td onmouseover= 
 "mover(2);" 
  onmouseout= 
 "mout(2);" 
 >操作</td> 
 
          
 </tr> 
 
      
 </table> 
 
      
 <input type= 
 "button" 
  value= 
 "添加行" 
  onclick= 
 "addRow();" 
 /> 
 
      
 <input type= 
 "button" 
  value= 
 "添加列" 
  onclick= 
 "addCol();" 
 /> 
 
 </body> 

zh521zh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery操纵表格-增加、删除行和列

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http-equ
复制链接

扫一扫