Question

所需行为

根据所有表格的前两列中的搜索匹配项显示或隐藏表格（整个表格，而不是表格单元格） - 如果for _, row in df.iterrows: if select_f(row) >2: print row['B']的第一个或第二个<td>中存在匹配项，显示表，否则隐藏表。

我尝试过的事情

jsFiddle

＆＃13;

<tr>

＆＃13;

$("input").on("keyup", function() {
  var matcher = new RegExp($(this).val(), "gi");
  $(".my_table")
    .hide()
    .filter(function() {
      return matcher.test($(this).find("td").text());
    })
    .show();
});

＆＃13;

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

＆＃13;

不反对在每行中的前两个表格单元格上放置类，如果这有助于定位搜索，只是不完全确定如何定位正在过滤的表的实例。

最终我想在输入3个字符后开始过滤，因此可能会将代码包装在输入长度的条件检查中，并在输入长度为0时显示所有表（在退回内容之后）。

Answer 1

只是发布一个解决方案我最终开发了，即使它与接受的答案不同（因为它向不同的方向移动），以防它用其他方法帮助其他人。它不是精益的或优化的，但这可以帮助其他人看到逻辑的不同“部分”。

它根据搜索输入（最少3个字符）过滤表格并突出显示匹配的文本。它仅匹配每个<td>的前两个<tr>中的内容 - 在与内容开头匹配的第一个单元格中，在与内容中的任何位置匹配的第二个单元格中。

function search_tds(input_val) {
  $("table").each(function() {
    var match_counter = 0;

    // instance of table
    var $this = $(this);
    // first and second cells in each row
    var $tds = $this.find("td:nth-child(1),td:nth-child(2)");

    $tds.each(function(ind, val) {
      var cell = $tds[ind];
      var cell_text = cell.innerText;

      // if the first cell, perform check at start of string
      if ($(this).is(":nth-child(1)")) {
        var is_at_start_of_string =
          cell_text.toLowerCase().indexOf(input_val.toLowerCase()) === 0;
        // remove span tags to remove 'history' state
        // ie if there was existing match and then pasted in
        // another matching value
        if (is_at_start_of_string === false) {
          cell.innerHTML = cell.innerText;
        }
      } else if ($(this).is(":nth-child(2)")) {
        // if the second cell, perform check anywhere in string
        var exists_in_string =
          cell_text.toLowerCase().indexOf(input_val.toLowerCase()) !== -1;
        // remove span tags to remove 'history' state
        // ie if there was existing match and then pasted in
        // another matching value
        if (exists_in_string === false) {
          cell.innerHTML = cell.innerText;
        }
      }

      if (is_at_start_of_string === true || exists_in_string === true) {
        match_counter += 1;
        // cell.innerHTML = cell.innerText.replace(
        //  input_val,
        //  '<span class="matched_text">' + input_val + "</span>"
        //);
        // to replace with accurate case, see:  
        // https://stackoverflow.com/a/3294644/1063287
        var reg = new RegExp(input_val, 'i');
        cell.innerHTML = cell.innerText.replace(reg, '<span class="matched_text">$&</span>');
      }
    });

    if (match_counter > 0) {
      $(this).css("display", "table");
    } else {
      $(this).css("display", "none");
    }
  });
}

$(document).on("keyup", "input", function() {
  var input_val = $(this).val();
  var input_length = input_val.length;
  if (input_length > 2) {
    search_tds(input_val);
  } else if (input_length <= 2) {
    $("table").css("display", "table");
    $("span").removeClass("matched_text");
  }
});

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 80%;
  table-layout: fixed;
  margin-left: auto;
  margin-right: auto;
}

td,
th {
  border: 1px solid #000;
  text-align: left;
  padding: 8px;
  width: 33.3%;
}

.matched_text {
  background: yellow;
}

input {
  padding: 10px;
  width: 80%;
  margin: 10px auto;
  display: block;
  background: #eee;
  color: #505050;
  border: 1px solid #b0b0b0;
  font-size: 20px;
}

* {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="enter search text (3 characters minimum)...">

<table>

  <tbody>
    <tr>
      <td>011010</td>
      <td>best</td>
      <td>this text is not searched zest</td>
    </tr>
    <tr>
      <td>020110</td>
      <td>vest 011010</td>
      <td>this text is not searched jest</td>
    </tr>
  </tbody>

</table>

<br>

<table>

  <tbody>
    <tr>
      <td>808080</td>
      <td>Jest</td>
      <td>this text is not searched best</td>
    </tr>
    <tr>
      <td>805601</td>
      <td>Pest</td>
      <td>this text is not searched chest</td>
    </tr>
  </tbody>

</table>

<br>

<table>

  <tbody>
    <tr>
      <td>020101</td>
      <td>zest</td>
      <td>this text is not searched vest</td>
    </tr>
    <tr>
      <td>501025</td>
      <td>chesT</td>
      <td>this text is not searched 808080</td>
    </tr>
  </tbody>

</table>

Answer 2

您可以将搜索范围限制为void addToMap(std::weak_ptr<MyKey> key, const MyVal &val) { myMap[key]=val } void addToMap(std::shared_ptr<MyKey> key, const MyVal &val) { myMap[key]=val } std::shared_ptr<MyKey> getFirstKey() { auto it=myMap.begin(); return=it->first.lock(); }和第二个孩子（:first-child）或 -ed：

:nth-child(2)

或者，正如您所建议的那样，您可以在前两个return matcher.test($(this).find("td:first-child,td:nth-child(2)").text());中添加一个类，例如td，并将查询字符串细化为searchable。

如何按td内容过滤多个表

2 个答案: