jQueryでAND検索の絞り込み検索を自作した話。

///////////////////////////////////////////////////////////
// ▼▼▼ 絞り込み検索
///////////////////////////////////////////////////////////
$('input[type="submit"]').click(function () {
  let txtVal = $("#text").val(), //テキスト入力欄
    prefVal = $("#pref").val(), //出身地プルダウン
    representativeWorkVal = $("#representativeWork").val(); //代表作プルダウン
  //全て空欄だったらreturn
  if (txtVal == "" && prefVal == "" && representativeWorkVal == "") {
    return;
  } else {
    //行数分繰り返す
    for (i = 1, paraLen = $("tr").length; i < paraLen; i++) {
      if (
        $("tr").eq(i).html().match(txtVal) && //テキスト入力欄
        $("tr").eq(i).html().match(prefVal) && //出身地プルダウン
        $("tr").eq(i).html().match(representativeWorkVal) //代表作プルダウン
      ) {
        $("tr").eq(i).show(500);
        $(".noMatching").addClass("hide"); //hide付与
      } else {
        $.when($("tr").eq(i).hide(500)).done(function () {
          //一度背景色をリセット
          $("tr").css("background-color", "initial");
          //表示された奇数の行の背景色を#e2e8f9に
          $("tr:visible")
            .not('[class="table_head_tr"]')
            .filter((i, e) => i % 2 === 1)
            .css("background-color", "#e2e8f9");
          // 表示されている行が0だったら「該当はありません。」を表示
          if (
            $("tr").not('[class="table_head_tr"]').filter(":visible").length < 1
          ) {
            $(".noMatching").removeClass("hide"); //hideを削除
          }
        });
      }
    }
  }
});

// ▼▼▼ 全て表示ボタン
$(".allDisplayBtn").click(function () {
  $("tr").show(500);
  $("#text").val(""); //テキスト入力欄
  $("#pref").val(""); //出身地
  $("#representativeWork").val(""); //代表作
  $(".noMatching").addClass("hide"); //hide付与
  //表示された奇数の行の背景色を#e2e8f9に
  $("tr:visible")
    .not('[class="table_head_tr"]')
    .filter((i, e) => i % 2 === 1)
    .css("background-color", "#e2e8f9");
});