JQuery点击隐藏行或者列

转载自:http://www.cnblogs.com/wenzichiqingwa/archive/2012/12/03/2799350.html

NUM1:隐藏当前选中的行（点击当前选中行）

NUM2:隐藏当前选中的列（点击列标题）

<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>小文</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>小李</td>
<td>21</td>
<td>男</td>
</tr>
<tr>
<td>小慧</td>
<td>21</td>
<td>女</td>
</tr>
<tr>
<td>琪琪</td>
<td>19</td>
<td>女</td>
</tr>
<tr>
<td>小勇</td>
<td>22</td>
<td>男</td>
</tr>
<tr>
<td>馨儿</td>
<td>23</td>
<td>女</td>
</tr>
<tr>
<td>小鹏</td>
<td>21</td>
<td>男</td>
</tr>
<tr>
<td>鸭梨山大</td>
<td>30</td>
<td>男</td>
</tr>
</tbody>
</table>

CSS：

.hover{
background-color: #00f;
color: #fff;
}

NUM1‘s jquery code：

$('tbody tr').hover(function(){
$(this).find('td').addClass('hover');
}, function(){
$(this).find('td').removeClass('hover');
});
$('tbody tr').click(function(){
$(this).hide();

});

NUM2's
jquery code：

$('th').hover(function(){
//                    获取当前th的索引值
var col_index = $(this).index();
//                     alert(col_index);
//nth-child的参数值从1开始，故索引值加1
$('tbody td:nth-child('+(col_index+1)+')').addClass('hover');
}, function(){
//                    移出所有tr子元素的样式
$('tbody tr').children().removeClass('hover');
});

$('th').click(function(){

var col_index = $(this).index();
//                     alert(col_index);
//                    隐藏当前列标题
$(this).hide();
//nth-child的参数值从1开始，故索引值加1
$('tbody td:nth-child('+(col_index+1)+')').hide();
})