如何排除按钮被过滤？

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>