0

Есть таблица. После определенного события (у меня это кнопка CHECK) элементам tr присваивается class.

<table border=1>
<tr>
    <td>show 444 after CHECK</td>
    <td>show 444 after CHECK</td>
    <td>3</td>
    <td>4</td>
    <td id="check">push CHECK to enable click <input type="button" value="CHECK"></td>
</tr>
<tr>
    <td>show 444 after CHECK</td>
    <td>show 444 after CHECK</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
</tr>
</table>

$(document).ready(function() {
    $('#check').click(function() {
        $('tr').attr('class', 'my-class');
        alert('CHECK PUSHED!');
    });

    $('table').on('click', 'tr.my-class > td:lt(2)', function() {
        alert(444);
    });
});

Затем на строки с новым классом my-class (только на первые 2 столбца строки) становится можно кликать.

Почему-то применяется только к первой строке. Хотя в селекторе указываю: для всех tr.my-class найти дочерние td, первые два

Этот же пример: https://jsfiddle.net/MegaByyte/h2bpb6av/7/

Нужно применить alert(444) ко всем строкам, а не только к первой

2 ответа 2

2

Используйте селектор:

tr.my-class > td:nth-child(-n+2)

вместо

tr.my-class > td:lt(2)

Ваш селектор берёт первые две ячейки, а не первые два столбца.

1
  • Всё как надо, спасибо! 4 авг 2017 в 13:27
0

Дело в том, что из всего набора tr.my-class выбирается только первые две td. Не две в каждом, а всего 2.

Можно сделать так:

$('#check').click(function() {
$('tr').each(function(){
    $(this).find('td:lt(2)').attr('class', 'my-class');
});

    alert('CHECK PUSHED!');
});

$('table').on('click', 'td.my-class', function() {
    alert(444);
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.