Question

如果用户输入任何text，我将创建一个过滤器功能，此功能将在表中找到具有该text的行。该代码有效，但存在错误。也就是说，如果某人想要搜索文本“编辑”或“删除”，则会显示每行，因为所有表行都有“编辑”和“删除”按钮。因此，我想使用Selector不搜索那些按钮。

我尝试了.filter，tr.can_filter等。this3中有许多选择器。没有工作; （

// In real code, this1, 2, 3 written as 'this'. just for recognition. 
function filterItem(self){
        $("#myInput").on("keyup", function(){
            var value = $(this1).val().toLowerCase();
            $("#myTable tr").filter(function() { 
            return $(this2).toggle($(this3).text().toLowerCase().indexOf(value) > -1);
            });
        });
}

// index.blade.php file
        <tbody id="myTable">
            @foreach($detail as $event)
            @php
            $datas = $event->participants->pluck('date', 'name');
            $array = JSON_decode($datas, true);
            $string = implode(":\n", array_keys($array))."\n".implode("\n", $array);
            @endphp
            <tr>
                <td class="can_filter">{{ $event->id }}</td>
                <td class="can_filter">{{ $event->your_name }}</td>
                <td class="can_filter">{{ $event->email }}</td>
                <td class="can_filter"><a href="{{ route('participants.create', $event->id) }}"
                    data-toggle="popover"
                    title="{{ print_r($array) }}
                    "> {{ $event->title }} </a></td>
                <td class="can_filter">{{ $event->location }}</td>
                <td class="can_filter">{{ $event->description }}</td>
                <td class="can_filter">{{ $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>
    </table>

所以我期望通过$("#myTable tr").filter(function() {来过滤表行，并且this2打开/关闭每行。这决定了要比较的内容。我认为它正在比较this3=row == value，所以我尝试将this3更改为.can_filter或添加return $(this).toggle($(this).has('.btn').length < 1 ? true : $(this).toggle(this).text().toLowerCase().indexOf(value) > -1);，以便可以搜索按钮以外的按钮。这不起作用。

Answer 1

您要显示包含具有键入内容的单元格的任何tr，并忽略编辑和删除文本：

或者在删除和编辑单元格中没有任何文本

$("#myInput").on("input", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr").hide();
  $("#myTable tr").filter(function() {
    return $(this).text().toLowerCase().indexOf(value) > -1
  }).show()
});

a.btn::after {
  content: "Edit"
}

button.btn::after {
  content: "Delete"
}

td { border-left: 1px solid black; padding:5px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myInput" />
<hr/>
<table>
  <tbody id="myTable">
    <tr>
      <td>ID 1</td>
      <td>John "Delete" Johnson</td>
      <td>hotmail</td>
      <td><a href="" data-toggle="popover" title="title 1">Title 1</a></td>
      <td>Location 1</td>
      <td>Desc 2</td>
      <td>2019-09-10</td>
      <td>
        <a href="" class="btn btn-primary"></a>
      </td>
      <td>
        <button class="btn btn-danger" type="button" name="btn"></button>
      </td>
    </tr>
    <tr>
      <td>ID 2</td>
      <td>Frank "The editor" Franklin</td>
      <td>gmail</td>
      <td><a href="" data-toggle="popover" title="title 1">Title 2</a></td>
      <td>Location 2</td>
      <td>Desc 2</td>
      <td>2019-09-11</td>
      <td>
        <a href="" class="btn btn-primary"></a>
      </td>
      <td>
        <button class="btn btn-danger" type="button" name="btn"></button>
      </td>
    </tr>
  </tbody>
</table>

仅查看具有can_filter类的单元格的旧版本：

$("#myInput").on("input", function() {
  var value = $(this).val().toLowerCase();
  $("#myTable tr").hide();
  $("#myTable tr td.can_filter").each(function() {
    var $tr = $(this).closest("tr")
    if ($(this).text().toLowerCase().indexOf(value) > -1 && $tr.not(":visible")) $tr.show()
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="myInput" />
<table>
  <tbody id="myTable">
    <tr>
      <td class="can_filter">ID 1</td>
      <td class="can_filter">John "Delete" Johnson</td>
      <td class="can_filter">hotmail</td>
      <td class="can_filter"><a href="" data-toggle="popover" title="title 1">Title 1</a></td>
      <td class="can_filter">Location 1</td>
      <td class="can_filter">Desc 2</td>
      <td class="can_filter">2019-09-10</td>
      <td>
        <a href="" class="btn btn-primary">Edit</a>
      </td>
      <td>
        <form action="" method="post">
          <button class="btn btn-danger" type="submit" name="btn">Delete</button>
        </form>
      </td>
    </tr>
    <tr>
      <td class="can_filter">ID 2</td>
      <td class="can_filter">Frank "The editor" Franklin</td>
      <td class="can_filter">gmail</td>
      <td class="can_filter"><a href="" data-toggle="popover" title="title 1">Title 2</a></td>
      <td class="can_filter">Location 2</td>
      <td class="can_filter">Desc 2</td>
      <td class="can_filter">2019-09-11</td>
      <td>
        <a href="" class="btn btn-primary">Edit</a>
      </td>
      <td>
        <form action="" method="post">
          <button class="btn btn-danger" type="submit" name="btn">Delete</button>
        </form>
      </td>
    </tr>
  </tbody>
</table>

为什么此选择器在jQuery中不起作用？

1 个答案: