Question

我有很多表，这些表的可点击行如下：

$('.clickable-tbody tr').click(function () {            
                var value = $(this).find('td:first').text().replace(/\s/g, '');

                var url = "/Link?ID=" + value;
                $(location).attr('href', url);
        })

不幸的是，两个表中都有一些带有按钮的td，因此我需要一种方法将它们从可单击区域（理想情况下是另一个类）中排除，以便按钮可以单击而不触发听众。所以：

<tbody class="clickable-tbody">
<tr>
<td> //All of these need to have a href listener as in the jquery
</td>
<td class="no-click">
<button></button> //I want the button to fire, and not the href
</td>
<td>
</td>

我找不到排除它们的好方法。

我看过：

jQuery Listener Excluding Child

但是我的其他TD上没有独立的类（有太多的人想这样做）。

理想情况下，我想要类似$（'。clickable-tbody tr'）的东西，除了$（td .no-click）

我知道可点击区域当前是整行，但是我尝试将其分解为每个td失败（然后它无法执行td：first）

更新（感谢以下内容）：

我认为我需要类似下面的内容，但是location属性仍然适用于表格行，因此不会排除具有no-click类的单元格

$('.clickable-tbody tr').click(function () {            
            var value = $(this).find('td:first').text().replace(/\s/g, '');

        $(this).find('td').each(function () {
            if (!$(this).hasClass('no-click')) {
                var url = "/Link?ID=" + value;
                $(location).attr('href', url);
            }
        })
    })

Answer 1

您可以简单地使用:not

排除行

$('.clickable-tbody td:not(.no-click)').click(function() {
  var $firstCellOfRow = $(this).closest("tr").find("td:first");
  console.log("Click fired: " + $firstCellOfRow.text());
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody class="clickable-tbody">
    <tr>
      <td>
        Cell 1
      </td>
      <td class="no-click">
        <button>Cell 2</button>
      </td>
      <td>
        Cell 3
      </td>
  </tbody>
</table>

Answer 2

使用hasClass()查找td是否具有no-click

$('.clickable-tbody td').click(function(e){ 
if(!$(this).hasClass('no-click'))
console.log('clicked')   
})

.no-click
{
border:1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
<tbody class="clickable-tbody">
<tr>
<td>
<button>Click</button>
</td>
<td class="no-click">
<button>Click</button>
</td>
<td>
<button>Click</button>
</td>
<td class="no-click">
<button>Click</button>
</td>
 
</tr>
<table>

Answer 3

$('.clickable-tbody tr').each(function () {
  $(this).find('td').each(function () {
    if ($(this).hasClass('no-click')) {
      $(this).find('button').attr('disabled', true)
    }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<table>
<tbody class="clickable-tbody">
  <tr>
    <td>
      <button>Click</button>
    </td>
    <td class="no-click">
      <button>Click</button>
    </td>
    <td>
      <button>Click</button>
    </td>
    <td class="no-click">
      <button>Click</button>
    </td>
  </tr>
  <table>

jQuery从中排除类

3 个答案: