jQuery JavaScript使用值数组过滤表

brccelvz  于 2023-01-01  发布在  Java
关注(0)|答案(2)|浏览(193)

我正在学习jQuery和js。我想过滤表中的值在我的数组。月份将永远是一个月,但名称可以有一个以上的名称。
我想要的结果是:
| 办公室|姓名|月份|数量|
| - ------| - ------| - ------| - ------|
| 1a|阿部D|二月|十三|
| 1a|乔恩河|二月|十二|

$(document).ready(function(){
var names = ["Abe D", "Jon R"];
var mth = "Feb"

$("button").click(function(){
    $("td:nth-child(2)").each(function(){
        let tr = $(this);
        let mths = tr.find('td:nth-child(3)').text();
        console.log(mth + ' : ' + mths) 
        if(names.indexOf($(this).text()) == -1 || mths !== mth){
            $(this).parent().hide();
           }
      });
   });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Office</th>
      <th>Name</th>
      <th>Month</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tr>
    <td>1a</td>
    <td>Abe D</td>
    <td>Jan</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1a</td>
    <td>Abe D</td>
    <td>Feb</td>
    <td>13</td>
  </tr>
  <tr>
    <td>1a</td>
    <td>Jon R</td>
    <td>Jan</td>
    <td>9</td>
  </tr>
  <tr>
    <td>1a</td>
    <td>Jon R</td>
    <td>Feb</td>
    <td>12</td>
  </tr>
  <tr>
    <td>2b</td>
    <td>Eve C</td>
    <td>Jan</td>
    <td>13</td>
  </tr>
  <tr>
    <td>2b</td>
    <td>Eve C</td>
    <td>Feb</td>
    <td>14</td>
  </tr>
</table>

<button>Filter</button>

如何让过滤器工作?

sg2wtvxw

sg2wtvxw1#

您似乎已经具备了从表的每一行中检索名称和月份的逻辑,因此要达到您的目标,您所需要做的就是对数组使用includes()方法,以确定当前的name是否存在于其中,并直接比较月份名称的字符串。
我建议在tr上进行此比较,而不是在td子级上,因为这样可以使hide()/show()的逻辑更加简单明了:

jQuery($ => {
  const names = ["Abe D", "Jon R"];
  const mth = "Feb"

  $("button").click(function() {
    $('tbody tr').hide().filter((i, tr) => {
      const $tr = $(tr);
      const name = $tr.children('td:nth-child(2)').text().trim();
      const month = $tr.children('td:nth-child(3)').text().trim();
      return names.includes(name) && month === mth;
    }).show();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Office</th>
      <th>Name</th>
      <th>Month</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1a</td>
      <td>Abe D</td>
      <td>Jan</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1a</td>
      <td>Abe D</td>
      <td>Feb</td>
      <td>13</td>
    </tr>
    <tr>
      <td>1a</td>
      <td>Jon R</td>
      <td>Jan</td>
      <td>9</td>
    </tr>
    <tr>
      <td>1a</td>
      <td>Jon R</td>
      <td>Feb</td>
      <td>12</td>
    </tr>
    <tr>
      <td>2b</td>
      <td>Eve C</td>
      <td>Jan</td>
      <td>13</td>
    </tr>
    <tr>
      <td>2b</td>
      <td>Eve C</td>
      <td>Feb</td>
      <td>14</td>
    </tr>
  </tbody>
</table>

<button>Filter</button>
1yjd4xko

1yjd4xko2#

.each()循环应该在行上循环。
然后使用.find()从行中获取name和month字段,测试它们,如果它们不匹配,则隐藏行。

$(document).ready(function() {
  var names = ["Abe D", "Jon R"];
  var mth = "Feb";

  $("button").click(function() {
    $("tbody tr").show(); // show everything before filtering
    $("tbody tr").each(function() {
      let tr = $(this);
      let mths = tr.find('td:nth-child(3)').text();
      let name = tr.find('td:nth-child(2)').text();
      if(!names.includes(name) || mths !== mth) {
        $(this).hide();
      }
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Office</th>
      <th>Name</th>
      <th>Month</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1a</td>
      <td>Abe D</td>
      <td>Jan</td>
      <td>10</td>
    </tr>
    <tr>
      <td>1a</td>
      <td>Abe D</td>
      <td>Feb</td>
      <td>13</td>
    </tr>
    <tr>
      <td>1a</td>
      <td>Jon R</td>
      <td>Jan</td>
      <td>9</td>
    </tr>
    <tr>
      <td>1a</td>
      <td>Jon R</td>
      <td>Feb</td>
      <td>12</td>
    </tr>
    <tr>
      <td>2b</td>
      <td>Eve C</td>
      <td>Jan</td>
      <td>13</td>
    </tr>
    <tr>
      <td>2b</td>
      <td>Eve C</td>
      <td>Feb</td>
      <td>14</td>
    </tr>
  </tbody>
</table>

<button>Filter</button>

相关问题