如何使用js

Question

我想做什么：我想用js为我的桌子做一个搜索栏。

我有什么：我有一个包含数据库数据的html表。

我尝试过什么：我尝试使用此代码检索结果但不起作用。这是我的完整代码：

<div class="box-tools">

                <div class="input-group input-group-sm" style="width: 150px;">
                    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">


                </div>

              </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
              <table class="table table-hover" id="myTable">
                <tbody><tr>
                  <th style="width: 10px">ID</th>
                  <th>Name</th>
                  <th>Image</th>
                  <th style="width: 40px">Action</th>
                </tr>
                <?php foreach($check as $row)
                 {?>
                <tr>


                  <td><?php echo $row['cat_id'];?></td>
                  <td><?php echo $row['category_name'];?></td>
                  <td><img src="<?php echo $row['category_image'];?>" height="100" width="100"></td>
                  <td><a href="editcategory.php?id=<?php echo base64_encode($row['cat_id']);?>"><button class=" btn btn-primary btn-warning" >Edit<i class="fa fa-pencil" aria-hidden="true"></i></button></a>
                  <td><a href="deletecategory.php?id=<?php echo base64_encode($row['cat_id']);?>" class="btn btn-social-icon btn-google"><i class="fa fa fa-trash-o"></i></a>
 <?php  } ?>
                </tr>
              </tbody></table>
            </div>
            <!-- /.box-body -->
          </div>
          <script>
function myFunction() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[0];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }       
  }
}
</script>


          </section>
      </div>

当我尝试搜索时，它会给我空洞的结果。