Question

我使用的是响应式数据表，试图在该数据表上单击行，因此如果单击该行，您将被重定向到新页面。效果很好，但是如果表格已折叠，我将无法显示子行，因为单击展开图标会激活行单击，并且我将被重定向。

所以我试图查看是否可以单击该图标，但是我不知道该怎么做

我尝试使用

   $("#jobListTable").hasClass('collapsed')

为了查看表格是否折叠，但我仍然想念如何检查单击的单元格

在这里可以找到简化的小提琴：http://jsfiddle.net/Anja_Reeft/agouq6ts/5/

但是我的实际代码是

$('#jobListTable tbody').on('click', 'tr', function (e) {

    var data = oTable.row( this ).data();
     if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        oTable.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }

    var selectedTaskID = data.taskID;
    var selectedJobNumber = data.jobNumber;
    var selectedReqno = data.reqno;
    var selectedPriority = data.priority;
    var selectedCreatedBy = data.createdBy;
    var selectedEmployeeInitials = data.employeeInitials;
    var selectedShortDescription = data.shortDescription;
    var selectedLongDescription = data.longDescription;
    var selectedSourceReference = data.sourceReference;
    var selectedAktivitetstype = data.aktivitetstype;
    var selectedDueDatetime = data.dueDatetime;
    var selectedRecurrence = data.recurrence;
    var selectedStatus = data.status;
    var selectedStatusColor = encodeURIComponent(data.statusColor);
    var teamID = "";
    if (sessionStorage.getItem("teamID")) {
      teamID = "&teamID="+sessionStorage.getItem("teamID");        
    }

    document.location.href="jobinfo.php?taskID="+selectedTaskID+"&jobNumber="+selectedJobNumber+"&reqno="+selectedReqno+"&priority="+selectedPriority+"&createdBy="+selectedCreatedBy+"&employeeInitials="+selectedEmployeeInitials+"&shortDescription="+selectedShortDescription+"&longDescription="+selectedLongDescription+"&sourceReference="+selectedSourceReference+"&aktivitetstype="+selectedAktivitetstype+"&dueDatetime="+selectedDueDatetime+"&recurrence="+selectedRecurrence+"&status="+selectedStatus+"&statusColor="+selectedStatusColor+teamID;
} );

如果您需要更多信息，请告诉我。

Answer 1

如果有人遇到类似问题：

我更改了代码，所以在每一行添加了一个按钮

"columns":  [
                {
                  data: null, // can be null or undefined
                  defaultContent: '<button type="button" id="jobInfoBtn" class="btn btn-sm"><i class="fa fa-info-circle" aria-hidden="true"></i></button>',
                },

然后更改了我的点击功能

$('#jobListTable tbody').on('click', 'tr', function (e) {

     if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        oTable.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
} );


$('#jobListTable tbody').on('click', 'button', function (e) {

    var data = oTable.row( $(this).parents('tr') ).data();

    var selectedTaskID = data.taskID;
    var selectedJobNumber = data.jobNumber;
    var selectedReqno = data.reqno;
    var selectedPriority = data.priority;
    var selectedCreatedBy = data.createdBy;
    var selectedEmployeeInitials = data.employeeInitials;
    var selectedShortDescription = data.shortDescription;
    var selectedLongDescription = data.longDescription;
    var selectedSourceReference = data.sourceReference;
    var selectedAktivitetstype = data.aktivitetstype;
    var selectedDueDatetime = data.dueDatetime;
    var selectedRecurrence = data.recurrence;
    var selectedStatus = data.status;
    var selectedStatusColor = encodeURIComponent(data.statusColor);
    var teamID = "";
    if (sessionStorage.getItem("teamID")) {
      teamID = "&teamID="+sessionStorage.getItem("teamID");        
    }

    document.location.href="jobinfo.php?taskID="+selectedTaskID+"&jobNumber="+selectedJobNumber+"&reqno="+selectedReqno+"&priority="+selectedPriority+"&createdBy="+selectedCreatedBy+"&employeeInitials="+selectedEmployeeInitials+"&shortDescription="+selectedShortDescription+"&longDescription="+selectedLongDescription+"&sourceReference="+selectedSourceReference+"&aktivitetstype="+selectedAktivitetstype+"&dueDatetime="+selectedDueDatetime+"&recurrence="+selectedRecurrence+"&status="+selectedStatus+"&statusColor="+selectedStatusColor+teamID;
} );

响应数据表处理行点击

1 个答案: