jquery 表格(點擊行或列,隱藏當前選中的行或列)


NUM1:隱藏當前選中的行(點擊當前選中行

NUM2:隱藏當前選中的列(點擊列標題)

在前兩篇的基礎上加一些代碼,大部分都相同。

HTML:

View Code
<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();
                })

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM