JQuery исключая класс из

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

К сожалению, в нескольких таблицах есть некоторые тд с кнопками, поэтому мне нужен способ исключить их из области, по которой можно кликать (в идеале с другим классом), чтобы кнопка могла нажиматься и не срабатывать для слушателей. Так:

<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, исключая ребенка

Но у меня нет независимого класса от других td (слишком много, чтобы хотеть сделать это).

В идеале я хочу что-то вроде: $ ('. Clickable-tbody tr'), кроме $ (td .no-click)

Я понимаю, что область кликабельности в настоящее время представляет собой целую строку, но мои попытки разбить ее на каждый тд не увенчались успехом (тогда не удалось выполнить тд: сначала)

Обновление (спасибо ниже):

Я думаю, что мне нужно что-то вроде ниже, но атрибут 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);
            }
        })
    })

jquery

1

Hawke 2 Май 2019 в 15:00

Answer 1

Вы можете просто исключить строки с помощью : не

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

1

Esko 2 Май 2019 в 12:42

Answer 2

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

0

Parth Raval 2 Май 2019 в 12:17

Answer 3

Используйте hasClass(), чтобы найти if 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>

0

Deepak A 2 Май 2019 в 12:37

JQuery исключая класс из

3 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

jquery