代码之家 › 专栏 › 技术社区 › craig

jQuery隐藏具有匹配文本或数据属性的TR

jquery

craig · 技术社区 · 6 年前

我想创建一个过滤器,它作用于表中的所有列,特别是忽略电话号码的格式。

我认为最简单的方法是将电话号码的数字部分添加到最近的数字中 TD

文本搜索功能按预期工作,但我似乎无法让数据属性搜索工作。

$(document).ready(function() {

  $("#inputSearch").on("keyup", function() {

    // search string
    var value = $(this).val().toLowerCase();

    // filter
    $("#tableContacts tr").filter(function() {

      // search text (functions correctly)
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
      // search work-telephone attributes; does not work; disabled
      // || $(this).children('td').data('work-telephone').value.indexOf(value) > -1
      // search mobile-telephone attributes; does not work; disabled
      // || $(this).children('td').data('mobile-telephone').value.indexOf(value) > -1

    });

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>
<table id="tableContacts" class="table">
  <thead>
    <tr>
      <th>name</th>
      <th>domain</th>
      <th>email</th>
      <th>work</th>
      <th>mobile</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="/contacts/5">Morticia Addams</a></td>
      <td>ghouhl.io</td>
      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>
      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>
      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>
    </tr>
    <tr>
      <td><a href="/contacts/6">Gomez Addams</a></td>
      <td>ghouhl.io</td>
      <td><a href="mailto:Gomez.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>
      <td data-work-telephone="88855512341"><a href="tel:(888) 555-1234 x1">(888) 555-1234 x1</a></td>
      <td data-mobile-telephone="8885553333"><a href="tel:(888) 555-3333">(888) 555-3333</a></td>
    </tr>
  </tbody>
</table>

1 回复 | 直到 6 年前

Gabriele Petrioli 6 年前

这个 .data('propety-name') 返回属性的实际内容,以便 .value undefined .
$(this).children('td') 将退还所有 <td> data < 在那个名单上。
<tr> 内部 <tbody> <thead>
最后,你需要 return 值为 .filter 工作职能( each )

所以,假设只有一个 data-work-telephone 一 data-mobile-telephone <tr> 你应该这样做

$(document).ready(function() {

  $("#inputSearch").on("keyup", function() {

    // search string
    var value = $(this).val().toLowerCase();

    // filter

    $("#tableContacts tbody tr").each(function() {

      var self = $(this),
        td = self.children(),
        text = self.text().toLowerCase(),
        workPhone = (td.filter('[data-work-telephone]').data('work-telephone') || '').toString(),
        mobilePhone = (td.filter('[data-mobile-telephone]').data('mobile-telephone') || '').toString(),
        match = text.indexOf(value) > -1 ||
        workPhone.indexOf(value) > -1 ||
        mobilePhone.indexOf(value) > -1;

      self.toggle(match)
    });

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inputSearch" type="text" placeholder="Search..." autofocus><br/>
<table id="tableContacts" class="table">
  <thead>
    <tr>
      <th>name</th>
      <th>domain</th>
      <th>email</th>
      <th>work</th>
      <th>mobile</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="/contacts/5">Morticia Addams</a></td>
      <td>ghouhl.io</td>
      <td><a href="mailto:Morticia.Addams@ghouhl.io" class="text-truncate">Morticia.Addams@ghouhl.io</a></td>
      <td data-work-telephone="88855512342"><a href="tel:(888) 555-1234 x2">(888) 555-1234 x2</a></td>
      <td data-mobile-telephone="8885552222"><a href="tel:(888) 555-2222">(888) 555-2222</a></td>
    </tr>
    <tr>
      <td><a href="/contacts/6">Someone else</a></td>
      <td>domain.tld</td>
      <td><a href="mailto:Someone.else@domain.tld" class="text-truncate">Someone.else@domain.tld</a></td>
      <td data-work-telephone="1321321546"><a href="tel:(132) 132-1546">(888) 555-1234</a></td>
      <td>N/A</td>
    </tr>
  </tbody>
</table>