当前位置:Web前端 > jquery> 正文

jquery操作table

时间:2016-3-20类别:Web前端

jquery操作table

jquery操作table

一、删除行

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

    二、删除一列

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

    三、得到(设置)某个单元格的值

  •  
  • 
    //设置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();
    
    		
  •  

    四、获取每一行指定的单元格的值

  •  
  • 
    var arr = [];
    $("#table1 tr td:nth-child(1)").each(function (key, value) {
    arr.push($(this).html());
    });
    var result = arr.join(',');
    
    		
  •  

    五、全选或全不选

  •  
  • 
    //方法一:
    //全选或全不选 此传入的参数为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);
    }
    
    		
  •  

    六、插入新行

  •  
  • 
    //在表格最后的位置
    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);
    
    		
  •  

    七、合并行单元格

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

    八、拆分行单元格

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

    九、合并列单元格

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

    十、拆分列单元格

  •  
  • 
    $("#table3 tr:eq(1) td:eq(1)").attr("rowspan", 1);
    //在下面行第一个单元格后插入单元格
    $("#table3 tr:eq(2) td:eq(0)").after("<td>第三行第二列</td>");
    
    		
  •  

    十一、表格奇偶行变色

  •  
  • 
    $(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")
    });
    
    		
  •  

    十二、鼠标移动到行更换背景色

  •  
  • 
    $(document).ready(function () {
        //鼠标移动到行变色,单独建立css类hover
        //tr:gt(0):表示获取大于 tr index 为0 的所有tr,即不包括表头
        $("#table1 tr:gt(0)").hover(
        function () { $(this).addClass("hover") },
        function () { $(this).removeClass("hover") })
    });
    
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐