【Jquery】Jquery操作table表格详细说明

函数说明

//eq:获取子元素索引从 0 开始
$("#tableid tr th:eq(1)").remove();//第二列
//nth-child:获取子元素从 1 开始
$("#tableid tr td:nth-child(2)").remove();//第二列

行操作

1、隐藏行

$("#tableid tbody tr:eq(3)").hide();  //隐藏第四行，行索引从0开始
//隐藏第二行的方式
$("#tableid tr:gt(0):eq(1)").hide();//通过hide隐藏实现
$("#tableid tr:gt(0):eq(1)").css("display", "none");//通过样式display实现，隐藏
$("#tableid tr:gt(0):eq(1)").css("display", "");//通过样式display实现，显示

2.删除行 

// 删除除第一行以外的所有行  
$("#tableid tr:not(:first)").remove(); 

//删除指定行（如：第二行）
$("#tableid tr:gt(0):eq(1)").remove(); 

//删除其它行，比如删除除第二行之外的所有行
$("#tableid tr:gt(0):not(:eq(1))").remove();

3、插入行

//在第二个tr后插入一行 
var trStr="<tr><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td></tr>"; 
$(trStr).insertAfter($("#tableid tr:eq(1)"));

4、齐偶行不同颜色

//通过style实现
$("#tableid tbody tr:odd").css("background-color", "#bbf");  
$("#tableid tbody tr:even").css("background-color","#ffc");  
//通过定义class实现 
$("#tableid tbody tr:odd").addClass("odd")  
$("#tableid tbody tr:even").addClass("even")  

5、鼠标移动行改变样式

//所有行，有单独行标题
$("#tableid tr").hover(function(){  
    $(this).children("td").addClass("hover")  
},function(){  
    $(this).children("td").removeClass("hover")  
}) 
//从第二行开始，第一行作为行标题
$("#tableid tr:gt(0)").hover(function() {  
    $(this).children("td").addClass("hover");  
}, function() {  
    $(this).children("td").removeClass("hover");  
}); 

列操作

1、隐藏列

//通过hide函数实现，如隐藏第二列
$("#tableid tr th:eq(1)").hide();
$("#tableid tr td:nth-child(2)").hide();
//通过样式隐藏和现实某列，如隐藏或显示第二列
//隐藏
$("#tableid tr th:eq(1)").css("display", "none");//隐藏标题列
$("#tableid tr td:nth-child(2)").css("display", "none");//隐藏内容列
//显示
$("#tableid tr th:eq(1)").css("display", "");//显示标题列
$("#tableid tr td:nth-child(2)").css("display", "");//显示内容列

//隐藏一列，如第四列
$("#tableid tr td::nth-child(4)").hide();  
$("#tableid tr").each(
    function()
    {
        $("td:eq(3)",this).hide();
    }
); 

  

2、删除列

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

//删除其它列，比如第二列之外的所有列，如果有表头，先删除表头
$("#tableid tr th:not(:eq(1))").remove();
$("#tableid tr td:not(:nth-child(2))").remove();

获取单元格中的值

//获取或设置某个单元格的值
//设置第2个tr的第一个td的值    
$("#tableid tr:eq(1) td:nth-child(1)").html("value");    
//获取第2个tr的第一个td的值    
$("#tableid tr:eq(1) td:nth-child(1)").html();

参考自：jQuery操作table表格详解-职坐标 (zhizuobiao.com)