Question

我想将css样式设置为单击复选框的行但无法执行此操作。代码如下。复选框单击的代码适用于全选和单独复选框。我想获取所选行的Request ID并通过post方法将它们通过JSON对象发送到数据库到php脚本。

可能没有选择该行。

HTML：

<table id="mytable" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th><input type="checkbox" name= "check_all" id="check_all"/></th>
                    <th>Request ID</th>
                    <th>Request Date</th>
                    <th>Leave Type</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Status</th>
                </tr>
            </thead>
        </table>

的javascript

$('#mytable').DataTable({
                data: msg,
                columns: [
                    { data: 'RequestID'},
                    { data: 'RequestID' },
                    { data: 'RequestDate' },
                    { data: 'LeaveType' },
                    { data: 'LeaveStart' },
                    { data: 'LeaveEnd' },
                    { data: 'Status' }
                ],
                "columnDefs": [ {
                     "targets": 0,
                      "searchable": false,
                      "data": "RequestID",
                      "render": function ( data, type, full, meta ) {
                                return '<input type="checkbox" class="checkBoxClass" name= "check_id[]" data-id="'+data+'" />';
                       }, 
                }]
            });

$("#check_all").click(function () {
        $(".checkBoxClass").prop('checked', $(this).prop('checked'));
    });

    $(".checkBoxClass").change(function(){
        if (!$(this).prop("checked")){
            $("check_all").prop("checked",false);
            $('#mytable').row(this).removeClass('row_selected');
        }
            $('#mytable').row(this).addClass('row_selected');
    });

Answer 1

<强>原因

您的代码存在一些问题：

您直接附加事件处理程序，但使用jQuery DataTables时，DOM中只存在当前页面元素。改为使用委托事件处理程序。
您需要使用$(this).closest('tr')访问行节点，而不是$('#mytable').row(this)
条件声明缺少else部分。

<强>解

使用以下代码将委派的事件处理程序附加到所有复选框。

$("#mytable").on('change', '.checkBoxClass', function(){
    if (!$(this).prop("checked")){
        $("check_all").prop("checked", false);
        $(this).closest('tr').removeClass('row_selected');
    } else {
        $(this).closest('tr').addClass('row_selected');
    }
});

单击复选框时无法为行设置类

1 个答案: