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

});

Jquery数据表：值相等，单击最近的复选框

1 个答案: