Jquery datatable：其中值是等於點擊最接近的複選框

Question

我遇到了一個問題，如果在我的jQuery數據表中繞過每行時值相等，然後添加一個類，然後單擊該元素。但我不能讓類添加該元素，所以我可以再點擊元素。

<table id="userTable" class="display" width="100%"> 
    <thead> 
    <tr> 
     <th>Enable/Disable</th> 
     <th>Number</th> 
     <th>Name</th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

jQuery(function($) { 
    var extension = "1000"; 

    data = [ 
    ['User_488', 'User 1', 'disable'], 
    ['User_487', 'User 2', 'disable'], 
    ['User_477', 'User 3', 'disable'], 
    ['User_490', 'User 4', 'disable'], 
    ['1000', 'User 5', 'disable'], 
    ['1001', 'User 6', 'enable'], 
    ['1002', 'User 7', 'enable'], 
    ['1004', 'User 8', 'enable'] 
    ] 

    var t = $('#userTable').DataTable({ 
    "data": data, 
    'columns': [{ 
     "render": function(data, type, row, meta) { 
     var checkbox = $("<input/>", { 
      "type": "checkbox" 
     }); 
     if (row[2] === "enable") { 
      checkbox.attr("checked", "checked"); 
      checkbox.addClass("checkbox_checked"); 
     } else { 
      checkbox.removeAttr("checked"); 
      checkbox.addClass("checkbox_unchecked"); 
     } 
     return checkbox.prop("outerHTML") 
     } 
    }, { 
     "render": function(data, type, row, meta) { 
     return row[0]; 
     } 
    }, { 
     "render": function(data, type, row, meta) { 
     return row[1]; 
     } 
    }], 
    order: [] 
    }); 
    t.rows().every(function(rowIdx, tableLoop, rowLoop) { 
    var data = this.data(); 
    var number = (t.cell(rowIdx, 0).data()); 
    if (number === extension) { 
     console.log("[SUCCESS]: Found: " + extension); 
     $(this).closest("[type=checkbox]").find('.checkbox_unchecked').addClass('clickmepls'); 
     var ev = document.createEvent("MouseEvents"); 
     ev.initEvent("click", true, true); 
     document.querySelector(".clickmepls").dispatchEvent(ev); 
     return false; 
    } 
    }); 

}); 

但我不能讓類添加到元素，並保持爲調度元素返回null。

這裏是JSFiddle。

Answer 1

你可以嘗試改變這種代碼

 

    t.rows().every(function(rowIdx, tableLoop, rowLoop) { 
     var data = this.data(); 
     var number = (t.cell(rowIdx, 0).data()); 
     if (number === extension) { 
      console.log("[SUCCESS]: Found: " + extension); 
      $(this).closest("[type=checkbox]").find('.checkbox_unchecked').addClass('clickmepls'); 
      var ev = document.createEvent("MouseEvents"); 
      ev.initEvent("click", true, true); 
      document.querySelector(".clickmepls").dispatchEvent(ev); 
      return false; 
     } 
     }); 

這個

 

    t.rows().every(function(rowIdx, tableLoop, rowLoop) { 
     var data = this.data(); 
     var number = (t.cell(rowIdx, 0).data()); 
     if (number === extension) { 
      nth = rowIdx + 1; 
      $('#userTable tbody tr:nth-child('+nth+')').find("input[type=checkbox]").trigger('click'); 
      return false; 
     } 
     }); 

以下是完整的javascript代碼

jQuery(function($) { 
    var extension = "1000"; 

    data = [ 
    ['User_488', 'User 1', 'disable'], 
    ['User_487', 'User 2', 'disable'], 
    ['User_477', 'User 3', 'disable'], 
    ['User_490', 'User 4', 'disable'], 
    ['1000', 'User 5', 'disable'], 
    ['1001', 'User 6', 'enable'], 
    ['1002', 'User 7', 'enable'], 
    ['1004', 'User 8', 'enable'] 
    ] 

    var t = $('#userTable').DataTable({ 
    "data": data, 
    'columns': [{ 
     "render": function(data, type, row, meta) { 
     var checkbox = $("<input/>", { 
      "type": "checkbox" 
     }); 
     if (row[2] === "enable") { 
      checkbox.attr("checked", "checked"); 
      checkbox.addClass("checkbox_checked"); 
     } else { 
      checkbox.removeAttr("checked"); 
      checkbox.addClass("checkbox_unchecked"); 
     } 
     return checkbox.prop("outerHTML") 
     } 
    }, { 
     "render": function(data, type, row, meta) { 
     return row[0]; 
     } 
    }, { 
     "render": function(data, type, row, meta) { 
     return row[1]; 
     } 
    }], 
    order: [] 
    }); 
    t.rows().every(function(rowIdx, tableLoop, rowLoop) { 
    var data = this.data(); 
    var number = (t.cell(rowIdx, 0).data()); 
    if (number === extension) { 
     nth = rowIdx + 1; 
     $('#userTable tbody tr:nth-child('+nth+')').find("input[type=checkbox]").trigger('click'); 
     return false; 
    } 
    }); 

});