jQuery操作table表格

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery操作table表格相关的知识，希望对你有一定的参考价值。

参考技术A 一、数据准备

二、操作

//1.鼠标移动行变色

$("#table1 tr").hover(function()

$(this).children("td").addClass("hover")

,function()

$(this).children("td").removeClass("hover")

)

$("#table2 tr:gt(0)").hover(function()

$(this).children("td").addClass("hover");

, function()

$(this).children("td").removeClass("hover");

);

//2.奇偶行不同颜色

$("#table3 tbody tr:odd").css("background-color", "#bbf");

$("#table3 tbody tr:even").css("background-color","#ffc");

$("#table3 tbody tr:odd").addClass("odd")

$("#table3 tbody tr:even").addClass("even")

//3.隐藏一行

$("#table3 tbody tr:eq(3)").hide();

//4.隐藏一列

$("#table5 tr td::nth-child(3)").hide();

$("#table5 tr").each(function()$("td:eq(3)",this).hide());

//5.删除一行

// 删除除第一行外的所有行

$("#table6 tr:not(:first)").remove();

//6.删除一列

// 删除除第一列外的所有列

$("#table6 tr td:not(:nth-child(1))").remove();

//7.得到（设置）某个单元格的值

//设置table7,第2个tr的第一个td的值。

$("#table7 tr:eq(1) td:nth-child(1)").html("value");

//获取table7,第2个tr的第一个td的值。

$("#table7 tr:eq(1) td:nth-child(1)").html();

//8.插入一行：

//在第二个tr后插入一行

$("插入3插入插入插入").insertAfter($("#table7 tr:eq(1)"));

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

(2)删除列，比如删除表格中的第二列：

//eq:获取子元素索引从 0 开始，先删除表头$("#table3 tr th:eq(1)").remove();//nth-child:获取子元素从 1 开始$("#table3 tr td:nth-child(2)").remove();

(3)删除其它行，比如第二行之外的所有行：

$("#table3 tr:gt(0):not(:eq(1))").remove();

(4)删除其它列，比如第二列之外的所有列：

//先删除表头$("#table3 tr th:not(:eq(1))").remove();$("#table3 tr td:not(:nth-child(2))").remove();

(5)隐藏行，比如隐藏第二行：

$("#table3 tr:gt(0):eq(1)").hide();//或者//$("#table3 tr:gt(0):eq(1)").css("display", "none")//显示//$("#table3 tr:gt(0):eq(1)").css("display", "");

(6)隐藏列，比如隐藏第二列：

$("#table3 tr th:eq(1)").hide();

$("#table3 tr td:nth-child(2)").hide();

//或者

//$("#table3 tr th:eq(1)").css("display", "none");

//$("#table3 tr td:nth-child(2)").css("display", "none");

//显示

//$("#table3 tr th:eq(1)").css("display", "");

//$("#table3 tr td:nth-child(2)").css("display", "");

jquery 获取 table 总行数：

$("table tr").size();

 var hang = $("#g").find("tr").length;

jquery 获取 table 总列数：

$("table td").size();

var lie = $("#g").find("tr").find("td").length-1;

jquery里操作table表格的各种方法

 

技术分享图片 
<!doctype html>
<html lang="en">
<head>
<title>jquery里操作table相关的各种方法在线演示-aijQuery.cn</title>
<script src="/static/jquery-3.1.1.min.js"></script>
  <style type="text/css">
    .on {background-color:#ddd}
  </style>
</head>
<body style="text-align:center"><div class="m-1"></div>
  <h3>jquery操作table的各种方法</h3><div class="m-2"></div>
<table id="aijquery" border="1" cellpadding="7" cellspacing="0" align="center">
    <tr><td>测试1.1</td><td>测试1.2</td><td>测试1.3</td><td>测试1.4</td><td>测试1.5</td><td>测试1.6</td></tr>
    <tr><td>测试2.1</td><td>测试2.2</td><td>测试2.3</td><td>测试2.4</td><td>测试2.5</td><td>测试2.6</td></tr>
    <tr><td>测试3.1</td><td>测试3.2</td><td>测试3.3</td><td>测试3.4</td><td>测试3.5</td><td>测试3.6</td></tr>
    <tr><td>测试4.1</td><td>测试4.2</td><td>测试4.3</td><td>测试4.4</td><td>测试4.5</td><td>测试4.6</td></tr>
    <tr><td>测试5.1</td><td>测试5.2</td><td>测试5.3</td><td>测试5.4</td><td>测试5.5</td><td>测试5.6</td></tr>
</table><div class="m-2"></div>
  <button id="huanse">鼠标经过时换色</button> <button id="jiou">奇偶行不同颜色</button> <button id="addtr">插入一行</button> <button id="addtd">插入一列</button><div class="m-1"></div>
  <button id="hidetr">隐藏/显示第三行</button>
  <button id="hidetd">隐藏/显示第三列</button>
  <div class="m-1"></div>
  <button id="deltr">删除第四行</button>
  <button id="deltd">删除第五列</button>
  <button id="deltrt">删除第二行外所有行</button>
  <button id="deltrd">删除第2到第4行</button>
  <div class="m-1"></div>
  <button id="deltrs">只留前三行</button>
  <button id="deltrf">只留第二到第四行</button>
  <div class="m-1"></div>
  <button id="readtd">读取第三行第四列的值</button>
  <button id="readtdt">读取第三列所有值</button>
  <button id="readtr">读取第三行所有值</button>
<script language="javascript">
//鼠标经过换色
$("#huanse").on("click",function(){
    $("#aijquery tr").hover(function(){$(this).children("td").addClass("on");},function(){$(this).children("td").removeClass("on")});
});
//奇偶行不同颜色
$("#jiou").on("click",function(){
    //偶数行 奇数行的话 odd改为even
    $("#aijquery tr:odd").find("td").css("background-color","#e7ffff");
});
//插入一行
$("#addtr").on("click",function(){
    //在表格的末尾添加一行
    //$("#aijquery").append(‘<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>‘);
    //在表格的开头添加一行
    //$("#aijquery").prepend(‘<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>‘);
     //在表格的第二行后面插入一行
      $("#aijquery tr").eq(1).after(‘<tr><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td><td>new</td></tr>‘);
});
//插入一列
$("#addtd").on("click",function(){
   //在表格的末尾添加一列
   //$("#aijquery tr").append(‘<td>newTD</td>‘);
   //在表格的开头添加一列
   //$("#aijquery tr").prepend(‘<td>newTD</td>‘);
   //在表格的第二列后添加一列
   $("#aijquery tr td:nth-child(2)").after(‘<td>newTD</td>‘);
});
//隐藏/显示第三行
$("#hidetr").on("click",function(){
    $("#aijquery tr").eq(2).toggle();
});
//隐藏/显示第三列
$("#hidetd").on("click",function(){
    //第一种方法
    //$("#aijquery tr td:nth-child(3)").toggle();
    //第二种方法
    $("#aijquery tr").each(function(){
        //$(this).find("td").eq(2).toggle();
        $("td",$(this)).eq(2).toggle();
    });
});
//删除第四行
$("#deltr").on("click",function(){
    $("#aijquery tr").eq(3).remove();
});
//删除第五列
$("#deltd").on("click",function(){
    $("#aijquery tr td:nth-child(5)").remove();
});
//删除第二行外所有行
$("#deltrt").on("click",function(){
    $("#aijquery tr:not(:eq(1))").remove();
});
//只留前三行
$("#deltrs").on("click",function(){
    $("#aijquery tr:gt(2)").remove();
});
//删除第2到第4行
$("#deltrd").on("click",function(){
    $("#aijquery tr").slice(1,4).remove();
});
//只留第二到第四行
$("#deltrf").on("click",function(){
    $("#aijquery tr").not($("#aijquery tr").slice(1,4)).remove();
});
//读取第三行第四列的值
$("#readtd").on("click",function(){
    var v=$("#aijquery tr:eq(2) td:eq(3)").html();
      alert(v);
});
//读取第三列所有值
$("#readtdt").on("click",function(){
      var arr=[];
    $("#aijquery tr").each(function(){
        arr.push($(this).find("td").eq(2).html());
    });
      alert(arr.join(","));
});
//读取第三行所有值
$("#readtr").on("click",function(){
      var arr=[];
    $("#aijquery tr:eq(2) td").each(function(){
        arr.push($(this).html());
    });
      alert(arr.join(","));
});
</script>
</body>
</html>
测试代码

 

下面是上面这个在线实例的截图：

技术分享图片
技术分享图片

1.鼠标经过时换色：

1
2
3
4
5
$("#table tr").hover(function(){
    $(this).children("td").addClass("on");
},function(){
    $(this).children("td").removeClass("on")
});


2.奇偶行不同颜色：

1
2
//偶数行 奇数行的话 odd改为even
$("#table tr:odd").find("td").css("background-color","#e7ffff");


3.动态插入一行：

1
2
3
4
5
6
//在表格的末尾添加一行   
$("#table").append(‘<tr><td>new</td><td>new</td></tr>‘);    
//在表格的开头添加一行    
$("#table").prepend(‘<tr><td>new</td><td>new</td></tr>‘); 
//在表格的第二行后面插入一行  
$("#table tr").eq(1).after(‘<tr><td>new</td><td>new</td></tr>‘);


4.动态插入一列：

1
2
3
4
5
6
//在表格的末尾添加一列   
$("#table tr").append(‘<td>newTD</td>‘);   
//在表格的开头添加一列   
$("#table tr").prepend(‘<td>newTD</td>‘);   
//在表格的第二列后添加一列   
$("#table tr td:nth-child(2)").after(‘<td>newTD</td>‘);


5.显示/隐藏第三行：

1
2
3
4
5
6
//切换第三行的状态 如果隐藏则显示 如果处在显示状态则隐藏
$("#table tr").eq(2).toggle();
//隐藏
$("#table tr").eq(2).hide();
//显示
$("#table tr").eq(2).show();


6.显示/隐藏第三列：

1
2
3
4
5
6
7
8
9
10
//第一种方法
$("#table tr td:nth-child(3)").toggle();
     
//第二种方法    
$("#table tr").each(function(){ 
    //第一种写法     
    $(this).find("td").eq(2).toggle();
    //第二种写法        
    $("td",$(this)).eq(2).toggle();    
});


7.删除第四行：

1
$("#table tr").eq(3).remove();


8.删除第五列：

1
$("#table tr td:nth-child(5)").remove();


9.只留前三行，其它删除：

1
$("#table tr:gt(2)").remove();


10.删除第2行外所有行：

1
$("#table tr:not(:eq(1))").remove();


11.删除第2到第4行：

1
$("#table tr").slice(1,4).remove();


12.只保留第2到第4行，其它全删除：

1
$("#table tr").not($("#table tr").slice(1,4)).remove();


13.读取第3行第4列的值：

1
var v=$("#table tr:eq(2) td:eq(3)").html();


14.读取第3列所有的值：

1
2
3
4
5
var arr=[];   
$("#table tr").each(function(){       
    arr.push($(this).find("td").eq(2).html());    
});  
alert(arr.join(","));


15.读取第3行所有的值：

1
2
3
4
5
var arr=[];   
$("#table tr:eq(2) td").each(function(){     
    arr.push($(this).html());    
});  
alert(arr.join(","));
 
 















以上是关于jQuery操作table表格的主要内容，如果未能解决你的问题，请参考以下文章

Jquery Table 的基本操作

Jquery Table 的基本操作

jquery操作table表格

Jquery Table 的基本操作

Jquery table元素操作-创建|数据填充|重置|隐藏行

Jquery Table 的基本操作