Question

在我的代码中，有table和index = text元素可以过滤搜索结果。效果很好，如果用户键入“ foo”，则保留具有“ foo”的表行，而其他行则被keyup隐藏。但问题是，如果我搜索“编辑”或“删除”，因为它也在表行中，因此过滤器无法工作。除了过滤器中的那些按钮，我该如何处理？

我尝试给每个表数据赋予id或class来分开按钮和其他行，但是如果这样做，结果是文本而不是表（看起来很糟）。

'''html

<tbody id="EL">
    @foreach($detail as $event)
    <tr>
        <td class="td">{{ $event->id }}</td>
        <td class="td">{{ $event->your_name }}</td>
        <td class="td">{{ $event->email }}</td>
        <td class="td"><a href="{{ route('participants.create', $event->id) }}"
            data-toggle="tooltip" data-html="true" title="
                {{ $event->participants->pluck('date', 'name') }}<br>
            "> {{ $event->title }} </a></td>
        <td class="td">{{ $event->location }}</td>
        <td class="td">{{ $event->description }}</td>
        <td class="td">{{ $event->date }}</td>
        <td>
            <a href="{{ route('events.edit', $event) }}" class="btn btn-primary">Edit</a>
        </td>
        <td>
            <form action="{{ route('events.destroy', $event->id) }}" method="post">
                @csrf
                @method('DELETE')
                <button class="btn btn-danger" type="submit" name="btn">Delete</button>
            </form>
        </td>
    </tr>
    @endforeach
</tbody>

'''

'''javascript

function filterItem(self){
    $(document).ready(function(){
        $("#Input").on("keyup", function(){
            var value = $(this).val().toLowerCase();
            // $("#EL tr").filter(function() {
            $("#EL td").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
}

'''

即使我搜索编辑或删除，

过滤器仍然有效。如果行的内容中有编辑或删除，则应保留在结果中。预先谢谢你！

Answer 1

也许是这样，使用has()来检查它，当前<td>有一个<button>元素可以做到。

$(document).ready(function() {
  $("#Input").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    let x = $("table td").filter(function() {
      $(this).toggle($(this).has('button').length > 0 ? true : $(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<input id="Input" />
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <th>Button</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Delete</td>
    <td>50</td>
    <td><button class="btn btn-danger" type="submit" name="btn">Delete</button></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td><button class="btn btn-danger" type="submit" name="btn">Delete</button></td>
  </tr>
</table>

如何排除按钮被过滤？

1 个答案: