<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div align="center">
    <div class="mw-500">
      <input type="search" id="inp_search">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <td>ID</td>
            <td>Name</td>
            <td>Email</td>
            <td>Phone</td>
            <td>Country</td>
          </tr>
        </thead>
        <tbody id="append_data">
          <tr>
            <td colspan="5">NO DATA FOUND</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>
html {
  font-family: "Roboto", sans-serif;
  width: 100%;
}
.mw-500 {
  max-width: 500px;
}
.table {
  margin: 0 auto;
  text-align: center;
  border-collapse: collapse;
  border: 1px solid #d4d4d4;
  background: #fff;
  border: 1px solid #dee2e6;
  width: 100%;
  max-width: inherit;
  caption-side: bottom;
  border-collapse: collapse;
}
.table th,
.table td {
  padding: 10px 10px;
  width: 50%;
}

.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}
.table th td,
.table tr td {
  width: auto;
}
.table {
  font-weight: 700;
}
.table th {
  border-bottom: 1px solid #d4d4d4;
}
.table td,
th {
  border-bottom-width: 2px;
  border: 1px solid #dee2e6;
}
#inp_search {
  margin-bottom: 20px;
  outline: 0;
  height: 2rem;
  width: 100%;
}

//our table's data
const tableData = {
  1: ["Simon ugorji", "simon@gmail.com", "01234", "Germany"],
  2: ["Tony ugorji", "tony@gmail.com", "013234", "Turkey"],
  3: ["Victor ugorji", "victor@gmail.com", "014234", "Germany"],
  4: ["Felix ugorji", "felix@gmail.com", "011234", "Canada"],
  5: ["Jordan ugorji", "jordan@gmail.com", "016234", "Costa Rica"],
  6: ["Henry ugorji", "henry@gmail.com", "0166234", "Belgium"],
  7: ["Frank Sams", "sams@gmail.com", "01234", "Nigeria"],
  8: ["John Doe", "jonny@gmail.com", "0123466", "Australia"],
  9: ["Peter Lamb", "peter@gmail.com", "0123774", "Algeria"],
  10: ["Rodney Human", "human@gmail.com", "0128934", "Ukraine"]
};
//store table data element
const tableDataElem = document.querySelector("#append_data");
//function to build table
function buildTable(matchingIDs) {
  //reset table data
  tableDataElem.innerHTML = "";
  //check if parameter is provided
  if (typeof matchingIDs === "undefined") {
    //our loop index
    let ind = 0;
    //our table index
    let tableInd = 1;
    //loop through table object
    while (ind < Object.keys(tableData).length) {
      //append data using a template literal
      tableDataElem.innerHTML += `
                <tr>
                    <td>${tableInd}</td>
                    <td>${tableData[tableInd][0]}</td>
                    <td>${tableData[tableInd][1]}</td>
                    <td>${tableData[tableInd][2]}</td>
                    <td>${tableData[tableInd][3]}</td>
                </tr>
            `;
      //increment loop index
      ind++;
      //increment table index
      tableInd++;
    }
  } else if (matchingIDs.length !== 0) {
    //check if matchingIDs array is not empty
    //our loop index
    let ind = 0;
    //our table index
    let tableInd = 1;
    //loop through matching IDs provided
    while (ind < matchingIDs.length) {
      //append data by getting ID of the record and using a template literal
      tableDataElem.innerHTML += `
                <tr>
                    <td>${tableInd}</td>
                    <td>${tableData[matchingIDs[ind]][0]}</td>
                    <td>${tableData[matchingIDs[ind]][1]}</td>
                    <td>${tableData[matchingIDs[ind]][2]}</td>
                    <td>${tableData[matchingIDs[ind]][3]}</td>
                </tr>
            `;
      //increment loop index
      ind++;
      //increment table index
      tableInd++;
    }
  } else {
    tableDataElem.innerHTML += `
            <tr>
                <td colspan="5">
                    NO DATA FOUND
                </td>
            </tr>
        `;
  }
}
buildTable();
//attach event listener
document.querySelector("#inp_search").addEventListener("input", function () {
  //store the search query
  let value = this.value.trim();
  //check if value is not empty
  if (value) {
    //store matching record IDs
    let matchingIDs = [];
    //loop index
    let ind = 1;
    //loop through the data to find matching text
    while (ind < Object.keys(tableData).length) {
      //perform case-insensitive search on the string
      if (
        tableData[ind][0].match(new RegExp(value, "i")) ||
        tableData[ind][1].match(new RegExp(value, "i")) ||
        tableData[ind][2].match(new RegExp(value, "i")) ||
        tableData[ind][3].match(new RegExp(value, "i"))
      ) {
        //store the id of the record
        matchingIDs.push(ind);
      }
      //increment index
      ind++;
    }
    //invoke the function by passing in the matching IDs
    buildTable(matchingIDs);
  } else {
    //invoke the build table function without providing an argument
    buildTable();
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.