如何排除按钮被过滤？

Posted 2023-03-14

【中文标题】如何排除按钮被过滤？

【英文标题】：How to except button from being filtered?

【发布时间】：2020-01-06 23:20:42

【问题描述】：

在我的代码中，有用于过滤搜索结果的 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)
            );
        );
    );

'''

即使我搜索编辑或删除，过滤器仍然有效。如果行的内容有编辑或删除，它应该保留在结果中。 提前谢谢！

【参考方案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>

【讨论】：

感谢您的友好评论：）但是如果我在您的代码中搜索“删除”，仍然有结果：（我想要做的就像“吉尔史密斯”是“吉尔删除” ，然后我搜索“删除”，结果中只剩下第一行。

真的很抱歉，但是当我输入'delete'时，我想显示的结果就是 Jill Delete 50 [Delete] 这一行。此代码显示 Delete [Delete] [Delete] ； （