jquery对table表格的经常使用操做

时间 2019-11-12

原文原文链接

1、删除行 css

         //删除除第一行外的全部行  
       
         $("#table1 tr:not(:first)").remove(); 
       
         //删除指定行 
       
         $("#table1 tr:eq(3)").remove();

2、删除一列 html

         //删除除第一列外的全部列  
       
         $("#table1 tr th:not(:nth-child(1))").remove(); 
       
         $("#table1 tr td:not(:nth-child(1))").remove(); 
       
         //删除第一列 
       
         $("#table1 tr td::nth-child(1)").remove();

3、获得（设置）某个单元格的值 jquery

         //设置table1,第2个tr的第一个td的值。  
       
         $("#table1 tr:eq(1) td:nth-child(1)").html("value");  
       
         //获取table1,第2个tr的第一个td的值。  
       
         $("#table1 tr:eq(1) td:nth-child(1)").html();

4、全选或全不选 this

            
         //方法一： 
       
         //全选或全不选 此传入的参数为event 如：checkAll(event) 
       
          function checkAll(evt) 
       
          { 
       
          evt=evt?evt:window.event; 
       
          var chall=evt.target?evt.target:evt.srcElement; 
       
          var tbl=$("#table1"); 
       
          var trlist=tbl.find("tr"); 
       
          for(var i=1;i<trlist.length;i++) 
       
          { 
       
          var tr=$(trlist[i]); 
       
          var input=tr.find("INPUT[type='checkbox']"); 
       
          input.attr("checked",chall.checked); 
       
          } 
       
          } 
       
         //方法二： 
       
         //全选或全不选 此传入的参数为this 如：checkAll(this) 
       
         function checkAll(evt) 
       
         { 
       
         var tbl=$("#table1"); 
       
         var trlist=tbl.find("tr"); 
       
         for(var i=1;i<trlist.length;i++) 
       
         { 
       
         var tr=$(trlist[i]); 
       
         var input=tr.find("INPUT[type='checkbox']"); 
       
         input.attr("checked",evt.checked); 
       
         } 
       
         } 
       
         //方法三： 
       
         //全选或全不选 此传入的参数为this 如：checkAll(this) 
       
         function checkAll(evt) 
       
         { 
       
         $("#table1 tr").find("input[type='checkbox']").each(function(i)...{ 
       
         $(this).attr("checked",evt.checked) 
       
         }); 
       
         } 
       
         //方法四： 
       
         //全选或全不选 此传入的参数为this 如：checkAll(this) 
       
         function checkAll(evt) 
       
         { 
       
         $("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked); 
       
         }

5、插入新行 spa

         //在表格最后的位置 
       
         var newRow = "<tr style=\\"background:red;\\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>"; 
       
         $("#table3 tr:last").after(newRow); 
       
         //在第二行以后插入 
       
         var newRow = "<tr style=\\"background:red;\\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>"; 
       
         $("#table3 tr:eq(1)").after(newRow);

6、合并行单元格 .net

         //合并 第二行第二个和第三个单元格 
       
         $("#table3 tr:eq(1) td:eq(1)").attr("colspan", 2); 
       
         $("#table3 tr:eq(1) td:eq(2)").remove();

7、拆分行单元格 htm

1 2	$("#table3 tr:eq(1) td:eq(1)").attr("colspan", 1); $("#table3 tr:eq(1) td:eq(1)").after("<td>第二行第三列</td>")

8、表格奇偶行变色 blog

         $(document).ready(function (){ 
       
             //奇偶行不一样颜色 
       
             $("#table2 tbody tr:odd").addClass("odd"), 
       
             $("#table2 tbody tr:even").addClass("even") 
       
             //或者 
       
             //$("#table2 tbody tr:odd").css("background-color", "#bbf"), 
       
             //$("#table2 tbody tr:even").css("background-color", "#ffc") 
       
         });

参考资料：jquery对table表格的经常使用操做 http://www.studyofnet.com/news/1177.html ci