【问题标题】:jquery clickable table row, except td with specific class namejquery可点击的表格行,除了具有特定类名的td
【发布时间】:2014-08-23 22:40:06
【问题描述】:

我有一张这样的桌子

<tbody>
   <tr class="row-links" data-link="http://mylink.com">
     <td>some cell</td>
     <td>some cell</td>
     <td>some cell</td>
     <td class="special-td"><a href="http://followthis.com">special cell</a></td>
     <td>some cell</td>
     <td class="special-td">special cell</td>
     <td>some cell</td>
   </tr>
</tbody>

我想让整行都可以点击,期待一些“特殊单元格”,我给了一个识别类名“specal-td”

整个行的链接通常存储在“data-link”属性中

到目前为止我想出的代码...不起作用的代码如下:

$('.row-links td:not(.special-td)').on('click', function(e){


    //get the link from data attribute
    var the_link = $(this).attr("data-link");

    //do we have a valid link      
    if (the_link == '' || typeof the_link === 'undefined') {
        //do nothing for now
    }
    else {
        //open the page
        window.location = the_link;
    }
});

欢迎任何帮助

更新:

感谢 (PhoenixWing156 & MDJ) 提供的答案,工作代码现在看起来像这样

$('.row-links').on('click', 'td:not(.special-td)', function(){


    //get the link from data attribute
    var the_link = $(this).parent().attr("data-link");

    //do we have a valid link      
    if (the_link == '' || typeof the_link === 'undefined') {
        //do nothing for now
    }
    else {
        //open the page
        window.location = the_link;
    }
});

【问题讨论】:

  • 解决方案同时使用 PhoenixWing156 和 MDJ 答案。谢谢你们,很遗憾我只能将一个答案标记为正确

标签: jquery tablerow clickable


【解决方案1】:
$('.row-links').on('click', 'td:not(.special-td)', function(){
   //Do something
});

【讨论】:

  • 感谢您的回答。我还必须使用 PhoenixWing156 代码来获取链接值
【解决方案2】:

data-link 属性是为“tr”元素定义的,而不是为被点击的“td”元素定义的。你可能想改变这一行:

//get the link from data attribute
var the_link = $(this).attr("data-link");

到这里:

//get the link from data attribute
var the_link = $(this).parent().attr("data-link");

【讨论】:

    猜你喜欢
    • 2012-07-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-04
    • 1970-01-01
    相关资源
    最近更新 更多