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) { 
      nth = rowIdx + 1; 
      $('#userTable tbody tr:nth-child('+nth+')').find("input[type=checkbox]").trigger('click'); 
      return false; 
     } 
     }); 

にこのコード

 

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

を変更しようとすることができますが、あなたの問題を明確に記述することができ、完全な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; 
    } 
    }); 

});