Question

我想创建一个过滤器，该过滤器作用于表中的所有列，尤其是忽略电话号码的格式。

我认为最简单的方法是将电话号码的数字部分添加到最接近的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>

Answer 1

fullWidth返回属性的实际内容，因此您添加的sap.ui是错误的，返回了.data('propety-name')。
.value也将返回所有undefined，但$(this).children('td')仅可用于该列表中的第一个<td>。
然后，您需要在data内定位<td>，以免影响<tr>内的对象
最后，您实际上需要<tbody>函数的值<thead>起作用（除非您不需要实际过滤，否则应使用return ）

因此，假设每个.filter只有一个each和一个data-work-telephone，那么您应该这样做

data-mobile-telephone

<tr>

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

1 个答案: