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);
})

 

 

 

（我就是要上首页！我就是要上首页！我就是要上首页！我就是要凑字数，我就是要上首页）