HTML CSS Javascript jQuery AJAX PHP Java MORE

How to search multiple columns in javascript

function myFunction() {

// Declare variables 
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var trs = table.tBodies[0].getElementsByTagName("tr");

// Loop through first tbody's rows
for (var i = 0; i < trs.length; i++) {

  // define the row's cells
  var tds = trs[i].getElementsByTagName("td");

  // hide the row
  trs[i].style.display = "none";

  // loop through row cells
  for (var i2 = 0; i2 < tds.length; i2++) {

    // if there's a match
    if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {

      // show the row
      trs[i].style.display = "";

      // skip to the next row



#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;

#myTable {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid #ddd;
  font-size: 18px;

#myTable th,
#myTable td {
  text-align: left;
  padding: 12px;

#myTable th {
  width: 20%;

#myTable tr {
  border-bottom: 1px solid #ddd;

#myTable tr.header,
#myTable tr:hover {
  background-color: #f1f1f1;

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<table id="myTable">
    <tr class="header">
      <td>16:30 ET</td>
      <td>18:30 ET</td>
      <td>PUERTO RICO</td>
      <td>18:30 ET</td>
      <td>19:30 ET</td>