Question

我有一张这样的表

<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＆amp; MDJ）提供的asnwers，工作代码现在看起来像这样

$('.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;
    }
});

Answer 1

$('.row-links').on('click', 'td:not(.special-td)', function(){
   //Do something
});

Answer 2

为“tr”元素定义了data-link属性，而不是单击的“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");

jquery可点击表格行，除了具有特定类名称的td

2 个答案: