如何根据 JS/Jquery 中的状态对数据进行分组

Question

我想根据它们的状态对它们进行排序，但我不知道我将如何进行，这样当我单击“活动”时，它将显示所有活动数据，而当不活动时，它将显示所有非活动数据。我还在学习 Javascript。

这是我在 JS 中的代码，其中按钮设置为活动和非活动。

$(document).on('click', '.status_checks', function() {
var status = '1';
if ($(this).hasClass("btn-success")) {
    status = '0';
}
var id = $(this).data('id');

$.ajax({
    type: "POST",
    url: "../forms/form_statusForspecs.php",
    data: {
        id: id,
        status: status
    },
    dataType: "json",
    success: function(data) {
        $('#dataTables').append(data);
        location.reload();
    }
});

});

这是我的 HTML 代码，我在其中获取 mySQL 中的“状态”列

<td>
   <center>
   <p data-id="<?php echo $row['ID'];?>"
    class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>">
    <?php echo ($row['status'])? 'Active' : 'Inactive'?>
   </p>
   </center>
</td>

这是我在选择中的代码，我没有这个函数的代码

    <div>
        <form action="GET">
            <div class="form-group">
                <label> Table group by Status </label>
                <select name="id" style="width:200px;" class="show-menu-arrow form-control" 
                 id="stats" onchange="statusReload(this)" required>
                    <option value="1" selected="">ACTIVE</option>
                    <option value="0">INACTIVE</option>
                </select>
            </div>
        </form>
    </div>

Answer 1

您可以使用:contains() 选择器检查.status_checks 是否包含Active 或Inactive，然后使用.closest("tr") 显示特定的 tr，否则隐藏它们。

演示代码：

$("#stats").change(function() {
  //get value from select box and set active or inactive
  var val = $(this).val() == 1 ? "Active" : "Inactive"
  console.log(val)
  //hide trs
  $("table tbody tr").hide()
  //find statuscheck tag and check if it contains active/inactive show that tr
  $("table tr").find(".status_checks:contains(" + val + ")").closest("tr").show()

})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form action="GET">
    <div class="form-group">
      <label> Table group by Status </label>
      <select name="id" style="width:200px;" class="show-menu-arrow form-control" id="stats" required>
        <option value="1" selected="">ACTIVE</option>
        <option value="0">INACTIVE</option>
      </select>
    </div>
  </form>
</div>
<table class="table">
  <tbody>
    <tr>
      <td>1
      </td>
      <td>
        <center>
          <p data-id="1" class="status_checks statusButton btn-success">
            Active
          </p>
        </center>
      </td>
    </tr>
    <tr>
      <td>2
      </td>
      <td>
        <center>
          <p data-id="2" class="status_checks statusButton btn-success">
            Active
          </p>
        </center>
      </td>
    </tr>
    <tr>
      <td>3
      </td>
      <td>
        <center>
          <p data-id="3" class="status_checks statusButton btn-danger">
            Inactive
          </p>
        </center>
      </td>
    </tr>
    <tr>
      <td>4
      </td>
      <td>
        <center>
          <p data-id="4" class="status_checks statusButton btn-danger">
            Inactive
          </p>
        </center>
      </td>
    </tr>
    <tr>
      <td>5
      </td>
      <td>
        <center>
          <p data-id="5" class="status_checks statusButton btn-success">
            Active
          </p>
        </center>
      </td>
    </tr>
  </tbody>
</table>