Question

我有一个像这样的树结构的表：

$("#treetable").treetable({expandable: true}).treetable("expandAll");
var log = $(".log");

var options = {
    valueNames: [ 'name', { data: ['tt-id'] } ]
};

var hackerList = new List('users', options);

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/css/jquery.treetable.theme.default.min.css">
  <title>JS Bin</title>
</head>
<body>
  <div id="users">
  <table id="treetable">
    <thead>
            <th class="sort" data-sort="name">Gender</th>
        </thead>
    <tbody class="list">
      <tr data-tt-id='1'>
        <td class="name">tomhanks</td>
      </tr>
      <tr data-tt-id='1.1' data-tt-parent-id='1'>
        <td class="name">timrobbins</td>
      </tr>
      <tr data-tt-id='1.1.1' data-tt-parent-id='1.1'>
        <td class="name">samuel l jackson</td>
      </tr>
      <tr data-tt-id='2'>
        <td class="name">leonardo dicaprio</td>
      </tr>
      <tr data-tt-id='2.1' data-tt-parent-id='2'>
        <td class="name">julia roberts</td>
      </tr>
      <tr data-tt-id='2.1.1' data-tt-parent-id='2.1'>
        <td class="name">arnold schwarzenegger</td>
      </tr>
      <tr data-tt-id='3'>
        <td class="name">jim carrey</td>
      </tr>
      <tr data-tt-id='3.1' data-tt-parent-id='3'>
        <td class="name">dan akroyd</td>
      </tr>
      <tr data-tt-id='3.1.1' data-tt-parent-id='3.1'>
        <td class="name">will smith</td>
      </tr>
      <tr>
        <td class="name">colin farrell</td>
      </tr>
    </tbody>
  </table>
  <input class="search" placeholder="Search" />
    <p class="log"></p>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-treetable/3.2.0/jquery.treetable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>
</body>
</html>

我想以只搜索最内层子行的方式过滤表格（在这种情况下：samuel l jackson，arnold schwarzenegger，will smith），结果应保持不变他们的父行也是。

我的意思是如果有人输入字符串"samue"，它应该返回：

v tomhanks
  v timrobbins
      samuel l jackson

目前我正在使用list.js，但我并不是坚持使用它。我相信vanillajs或jquery是可能的。

使用JavaScript，JQuery搜索树状结构HTML表。搜索结果应该保留父母

0 个答案: