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

当我单击输入日期[，]时，未选中该行

听起来您对日期选择器的点击正在传播到行处理程序

这是一个片段，其中显示了单击按钮也更改了行

@java -cp -ifNotExists "h2-1.4.199.jar;%H2DRIVERS%;%CLASSPATH%" org.h2.tools.Console%*
@if errorlevel 1 pause

$("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> https://api.jquery.com/event.stopPropagation/

对其进行修复

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

jQuery.dataTables：选择除最后一列以外的所有行

1 个答案: