javascript - Jquery 数据表 : where value is equal click closest checkbox

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

});

但我无法让该类添加到元素并继续为分派(dispatch)元素返回 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;
        }
      });

into this

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

Here is the full javascript code

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

});