jquery - 如何排除按钮被过滤?
问题描述
在我的代码中,有过滤搜索结果的 table 和 index=text 元素。它运作良好,如果用户键入“foo”,则保留有“foo”的表行,其他行被 keyup 隐藏。但问题是,如果我搜索“编辑”或“删除”,因为它也在表格行中,所以过滤器不起作用。我如何从过滤器中排除那些按钮?
我尝试为每个表数据提供 id 或类以分隔按钮和其他行,但如果我这样做,结果是文本而不是表(看起来很糟糕)。
'''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)
});
});
});
}
'''
即使我搜索编辑或删除,过滤器也有效。如果行的内容有编辑或删除,它应该保留在结果中。先感谢您!
解决方案
也许像这样使用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>