zoukankan      html  css  js  c++  java
  • 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);
    })

    (我就是要上首页!我就是要上首页!我就是要上首页!我就是要凑字数,我就是要上首页)

  • 相关阅读:
    前端面试题
    js collection
    javascript变量声明提升(hoisting)
    css3动画
    神奇的meta
    wap站bug小结
    前端collection
    js拾遗
    prototype之初印象
    自定义scrollBottom的值
  • 原文地址:https://www.cnblogs.com/ncellit/p/6611937.html
Copyright © 2011-2022 走看看