jquery 表格(点击行或列,隐藏当前选中的行或列)
NUM1:隐藏当前选中的行(点击当前选中行)
NUM2:隐藏当前选中的列(点击列标题)
在前两篇的基础上加一些代码,大部分都相同。
HTML:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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(); })