javascript - 使用select过滤表数据的问题

Question

我有一个 html 表，它有很多数据。然后我创建了一个选择选项来过滤表格并显示过滤后的数据。 select 基于 route 的列，它只有 3 个 option :Marikina,Montalban 和 Motalban/Marikina。
我可以在过滤数据时显示数据，但问题是当我选择 Marikina 或 Montalban 它也显示第三个选项，即 Montalban/的路线马里基纳。这是使用 select 过滤表格的 jquery 代码:

$(document).ready(function () {

        $('.filter').change(function () {
                var values = [];

                 $('.filter').each(function () {
                        var colIdx = $(this).data('col');

                         $(this).find('option:selected').each(function () {
                                 if ($(this).val() != "") values.push( {
                                        text: $(this).text(),
                                        colId : colIdx
                                 });
                        });
                });
                filter('table > tbody > tr', values);
        });

        function filter(selector, values) {console.log(values);
                $(selector).each(function () {
                        var sel = $(this);
                        var tokens = sel.text().trim().split('\n');
                        var toknesObj = [], i;
                        for(i=0;i<tokens.length;i++){
                                toknesObj[i] = {
                                     text:tokens[i].trim(), 
                                     found:false
                                };
                        }

                        var show = false;
                        //console.log(toknesObj);
                        $.each(values, function (i, val) {                

                     if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
                             toknesObj[val.colId].found = true;
                            }

                        });          
                        console.log(toknesObj);
                        var count = 0;
                         $.each(toknesObj, function (i, val) {
                                 if (val.found){
                                         count+=1;
                                 }
                         });
                        show = (count === values.length);        
                        show ? sel.show() : sel.hide();
        });
        var numOfVisibleRows =  $('#myTable tr:visible').length;
        var minus = numOfVisibleRows -1;
        document.getElementById("nor").innerHTML = minus;

        }
        const table = document.getElementById('myTable');
    const trs = table.querySelectorAll('tbody tr');
    const getAllDatesInTable = () => {
    const table = document.getElementById('myTable');
    const trs = table.querySelectorAll('tbody tr');
    const dates = [""];
    trs.forEach( tr => {
      const date = tr.querySelector('td:first-child').innerText;
      if (!dates.includes(date)) {
      dates.push(date);
      }
    });
  return dates;
};

    const dates = getAllDatesInTable();
    const select = document.getElementById('dateFilter');
    select.innerHTML = dates.map( d => `<option value=${d}>${d}</option>`);

});

这是示例 html 表 https://jsfiddle.net/indefinite/qmytsg37/9/
我希望如果我只选择 Marikina，它只会显示 Marikina 而不会显示 Montalban/Marikina。提前谢谢你

Answer 1

只需删除正则表达式检查并使用普通的==(等于)进行检查。

$(document).ready(function() {

  $('.filter').change(function() {
    var values = [];

    $('.filter').each(function() {
      var colIdx = $(this).data('col');

      $(this).find('option:selected').each(function() {
        if ($(this).val() != "") {
          values.push({
            text: $(this).text(),
            colId: colIdx
          });
        }
      });
    });
    filter('table > tbody > tr', values);
  });

  function filter(selector, values) {
    console.log(values);
    $(selector).each(function() {
      var sel = $(this);
      var tokens = sel.text().trim().split('\n');
      var toknesObj = [],
        i;
      for (i = 0; i < tokens.length; i++) {
        toknesObj[i] = {
          text: tokens[i].trim(),
          found: false
        };
      }

      var show = false;
      //console.log(toknesObj);
      $.each(values, function(i, val) {
        // here just remove the regular expression check.
        if (toknesObj[val.colId].text == val.text) {
          //if (toknesObj[val.colId].text.equal(new RegExp("\\b"+val.text+"\\b")) >= 0) {
          toknesObj[val.colId].found = true;
        }

      });
      console.log(toknesObj);
      var count = 0;
      $.each(toknesObj, function(i, val) {
        if (val.found) {
          count += 1;
        }
      });
      show = (count === values.length);
      show ? sel.show() : sel.hide();
    });
    var numOfVisibleRows = $('#myTable tr:visible').length;
    var minus = numOfVisibleRows - 1;
    document.getElementById("nor").innerHTML = minus;

  }
  const table = document.getElementById('myTable');
  const trs = table.querySelectorAll('tbody tr');
  const getAllDatesInTable = () => {
    const table = document.getElementById('myTable');
    const trs = table.querySelectorAll('tbody tr');
    const dates = [""];
    trs.forEach(tr => {
      const date = tr.querySelector('td:first-child').innerText;
      if (!dates.includes(date)) {
        dates.push(date);
      }
    });
    return dates;
  };

  const dates = getAllDatesInTable();
  const select = document.getElementById('dateFilter');
  select.innerHTML = dates.map(d => `<option value=${d}>${d}</option>`);

});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="filter" data-col="0" id="dateFilter">
  <option></option>
</select>
<table id="myTable">
  <thead>
    <tr>
      <td>Route</td>
      <td>Destination</td>
      <td>Date</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Marikina</td>
      <td>Cubao</td>
      <td>05/08/2019</td>
    </tr>
    <tr>
      <td>Montalban</td>
      <td>Litex</td>
      <td>05/07/2019</td>
    </tr>
    <tr>
      <td>Marikina/Montalban</td>
      <td>Quezon City</td>
      <td>05/10/2019</td>
    </tr>
  </tbody>
</table>