jQuery.dataTables: выбрал все строки, кроме последнего столбца

Question

У меня есть таблица с использованием jQuery.dataTables.Мне нужно ввести дату в последнем столбце.Но когда я нажимаю, строка ввода становится не выделенной.

Этот код предназначен для выбранных всех строк.

Вот таблица данных.

var table = $('#tableRegister').DataTable({
                data: [],
                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                }],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                order: [[1, 'asc']],
                columns: [
                    { data: "ACTION" },
                    { data: "ID" },
                    { data: "REGISTER_DATE" }
                ],
                rowCallback: function (row, data) { },
                filter: false,
                info: false,
                ordering: false,
                processing: true,
                retrieve: true
            });

  $('#table_name tbody').on('click', 'tr', function () {
                    $(this).toggleClass('selected');
                });

Я рисуюзначения таблицы с использованием ajax.

for (var i = 0; i < e.DataBadge._REG.length; i++) {
    table.row.add({
    "ID": e.DataBadge._REG[i]._ID,
    "REGISTER_DATE": `<input type='text' class='form-control datepicker2' id='register_date${i}'/>`
    }).draw();
}

Как мне обработать последний столбец, чтобы сохранить его выделенным?

Answer 1

когда я нажимаю дату ввода [,] строка становится не выбранной

похоже, что ваш щелчок по средству выбора даты распространяется до обработчика строки

Вот фрагмент, показывающий нажатие кнопки и изменение строки

$("table tr").click(function() {
  $(this).toggleClass("selected");
});

tr.selected { background-color: yellow; }
td { padding: 6px; border: 1px solid #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
</tbody>
</table>

и как это исправить используя .stopPropagation() https://api.jquery.com/event.stopPropagation/

$("table tr").click(function() {
  $(this).toggleClass("selected");
});

$("table button").click(function(e) {
  e.stopPropagation()
});

tr.selected { background-color: yellow; }
td { padding: 6px; border: 1px solid #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
<tr><td>A</td><td>B</td><td><input type='text'><button type='button'>pick</button></td></tr>
</tbody>
</table>

Кроме того, вы можете выделить ячейки строки вместо всей строки и исключить последний столбец, изменив свой обработчик кликов на td вместо tr, а затем включите

$(this).closest("tr").find("td").not(":last-child")

Пример:

$("table tr td").click(function() {
  $(".selected").removeClass("selected");
  $(this).closest("tr").find("td").not(":last-child").addClass("selected");
});

td.selected { background-color: yellow; }
td:not(:last-child) { cursor: pointer; }
td { padding: 6px; border: 1px solid #CCC; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</tbody>
</table>