Table點擊某個td獲取當前列的頭名稱

jq代碼：

 $("td").click(function () {
        var tdHtml = $(this).attr("html");
        var index = $(this).parents("tr").find("td").index($(this));//獲取當前td在tr種得索引
        var thAry = $('thead tr th');//獲取thead tr th,也就是頭標的th
        console.log(thAry[index]);//因為頭標與body都一樣的索引,因此可以取到
    })

html代碼（按理說應該適合各種樣式的table）

<table>
            <caption>氣候列表</caption>
            <thead>
                <tr>
                    <th>氣候名稱</th>
                    <th>氣候圖片</th>
                    <th>氣候音樂</th>
                    <th>氣候描述</th>
                    <th>被使用次數</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>123</td><td>123</td><td>123</td><td></td><td>0</td></tr>

   <tr><td>123</td><td>123</td><td>123</td><td></td><td>0</td></tr>

   <tr><td>123</td><td>123</td><td>123</td><td></td><td>0</td></tr>

   <tr><td>123</td><td>123</td><td>123</td><td></td><td>0</td></tr>

   <tr><td>123</td><td>123</td><td>123</td><td></td><td>0</td></tr>

        </tbody>
        </table>

 

主要是根據頭尾索引都一致的原理來進行獲取的,如果是比較復雜的表格布局應該就不適用該方法了。

第二種：

$("td").click(function(){
    var $th=$(this).parents("table").find("th");
    var thisHeaderText=$th.eq($(this).index()).html();
    console.log(thisHeaderText);
})

 

 

 

（我就是要上首頁！我就是要上首頁！我就是要上首頁！我就是要湊字數，我就是要上首頁）