Jquery 操作 Html Table 实例

Jquery 操作 Html Table 是很方便的，这里对表格的基本操作进行一下简单的总结。

 

一、鼠标移动到行更换背景色：

增加一个css样式：

.hover

{

   background-color:  #cccc00;

}

Js脚本：

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

});

二、 表格奇偶行变色 ：

奇数行和偶数行css：

.odd{ background-color:  #bbf;}

.even{ background-color: #ffc; }

  Js脚本：

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

});

  结果显示：

       

三、基本操作：

//(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", "");

//(7)插入新行，在表格最后的位置：

var  newRow =  "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>" ;

$( "#table3 tr:last" ).after(newRow);

//(8)插入行，在第二行之后插入：

var  newRow =  "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>" ;

$( "#table3 tr:gt(0):eq(1)" ).after(newRow);

//(9)获得单元格的值，比如第二行第三列：

var  v = $( "#table3 tr:gt(0):eq(1) td:eq(2)" ).text();

//结果显示：第二行第三列

//(10)获取一列的所有值，比如第二列：

var  v =  "" ;

  $( "#table3 tr td:nth-child(2)" ).each( function  () {

         v += $( this ).text()+ " " ;

});

//(11)获取一行的所有值，比如第二行：

  var  v =  "" ;

  $( "#table3 tr:gt(0):eq(1) td" ).each( function  () {

         v += $( this ).text() +  " " ;

  });

//结果：第二行第一列  第二行第二列  第二行第三列  第二行第四列  第二行第五列

//(12)合并行单元格 比如合并 第二行第二个和第三个单元格：

$( "#table3 tr:gt(0):eq(1) td:eq(1)" ).attr( "colspan" , 2);

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

//(13)拆分行单元格将上面合并的单元格还原：

//注意不能使用

//$("#table3 tr:gt(0):eq(1) td:eq(1)").removeAttr("colspan");

  $( "#table3 tr:gt(0):eq(1) td:eq(1)" ).attr( "colspan" , 1);

  $( "#table3 tr:gt(0):eq(1) td:eq(1)" ).after( "<td>第二行第三列</td>" )

  //(14)合并列单元格，比如合并第二列第二个单元格和第三个单元格

$( "#table3 tr:gt(0):eq(1) td:eq(1)" ).attr( "rowspan" , 2);

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

//(15)拆分列单元格，比如将上面刚合并的单元格还原：

  $( "#table3 tr:gt(0):eq(1) td:eq(1)" ).attr( "rowspan" , 1);

//在下面行第一个单元格后插入单元格

  $( "#table3 tr:gt(0):eq(2) td:eq(0)" ).after( "<td>第三行第二列</td>" );

//(16)为每个单元格增加点击事件，并弹出该单元格行索引和列索引：

$(document).ready( function  () {

     //点击#table3 的单元格返回 单元格索引

     $( "#table3 td" ).click( function  () {

         var  tdSeq = $( this ).parent().find( "td" ).index($( this ));

         var  trSeq = $( this ).parent().parent().find( "tr" ).index($( this ).parent());

         alert( "第"  + (trSeq) +  "行，第"  + (tdSeq+1) +  "列" );

     })

});




原文：http://magina.blog.51cto.com/5235631/1349373