Question

我有html表，并且有很多数据。然后我创建了一个选择选项来过滤表并显示过滤后的数据。 [{"name": "A", "score": 60,"other_details": ""}] [{"name": "B", "score": 45, "other_details": ""}] [{"name":"C", "score": 65, "other_details": ""}]位于select的一列中，其中只有3个route： Marikina ， Montalban 和 Motalban / Marikina 。
我可以在过滤数据时显示数据，但是问题是当我选择option或Marikina时，它也显示了第三个选项，即Montalban的路线。这是使用select过滤表的jquery代码：

Montalban/Marikina

这是示例html表https://jsfiddle.net/indefinite/qmytsg37/9/
我希望如果仅选择$(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>`); });，它将仅显示Marikina，而不显示Marikina。预先谢谢你

Answer 1

只需删除regurar表达式检查并使用正常的==（等于）进行检查。

$(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>

Answer 2

Regex验证解决了这个问题

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

https://jsfiddle.net/h3159x6e/

使用select过滤表数据时出现问题

2 个答案: