Why this selector doesn't work in jQuery?

Question

I made a filter function if user enters any text, this function finds the rows in the table that has that text. This code is working but has a bug. That is, if someone wants to search for text 'edit' or 'delete' every rows are displayed because all the table row has 'Edit' and' Delete' button. So I want to use Selector to not search those buttons.

I tried .filter, tr.can_filter etc.. many selectors in this3. Ain't works ; (

// 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>

So what I expected is by $("#myTable tr").filter(function() { I'm filtering table rows, and this2 turns on/off each row. and this3 decides what to compare. I think it's comparing this3=row == value so I'm trying change this3 to .can_filter or add return $(this).toggle($(this).has('.btn').length < 1 ? true : $(this).toggle(this).text().toLowerCase().indexOf(value) > -1); so that I can except button from being searched. which is not working.

Answer 1

You want to show whatever tr that has a cell with the typed content and ignore the edit and delete text:

Alternatively do not have any text in the cells of delete and edit

$("#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>

Old version looking ONLY at the cells that have class 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>