Changing column on searching in html table

Question

Created a custom search in the table using javascript. Working as expected!

Can (Sr.) always be 1,2,3,etc?

Meaning, In the below script, if I search "vin", it will show only that row having character "vin" in the name. So in below, there is only one. Now it's showing Sr number as 2, but as there is only 1, it should show 1.

$(document).ready(function() {
  $("#table_search").on("keyup", function() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("table_search");
    filter = input.value.toUpperCase();
    table = document.getElementById("table_body");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[1];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  });
});

.form-control {
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th,
td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input class="form-control" id="table_search" type="text" placeholder="Search..."></p>

<table>
  <thead>
    <tr>
      <th>Sr</th>
      <th>Name</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody id="table_body">
    <tr>
      <td class="font-elephant">1</td>
      <td class="font-elephant">John</td>
      <td class="font-elephant"><span>438</span> Passed</td>
    </tr>
    <tr>
      <td class="font-elephant">2</td>
      <td class="font-elephant">Kevin</td>
      <td class="font-elephant"><span>238</span> Failed</td>
    </tr>

    <tr>
      <td class="font-elephant">3</td>
      <td class="font-elephant">Lux</td>
      <td class="font-elephant"><span>568</span> Passed</td>
    </tr>

    <tr>
      <td class="font-elephant">4</td>
      <td class="font-elephant">Bro</td>
      <td class="font-elephant"><span>538</span> Passed</td>
    </tr>
  </tbody>
</table>

Answer 1

Just add more Sr column when searching. Try following this. Hope to help, my friend :))

$(document).ready(function() {
  $("#table_search").on("keyup", function() {
    var input, filter, table, tr, tdSr, tdName, i, txtSrValue, txtNameValue;
    input = document.getElementById("table_search");
    filter = input.value.toUpperCase();
    table = document.getElementById("table_body");
    tr = table.getElementsByTagName("tr");

    for (i = 0; i < tr.length; i++) {
      tdSr = tr[i].getElementsByTagName("td")[0];   
      tdName = tr[i].getElementsByTagName("td")[1];
      if (tdSr) {
        txtSrValue = tdSr.textContent || tdSr.innerText;
        txtNameValue = tdName.textContent || tdName.innerText;
        if (txtNameValue.toUpperCase().indexOf(filter) > -1
        || txtSrValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  });
});

https://jsfiddle.net/7vnchukx/

Answer 2

If you actually wanted to show index number of the search result, add one 'th' element for Serial Number and a 'td' element in each 'tr' element.

And then change the .innerHTML of the Serial Number, accordingly.

CODE SNIPPET:

<style>
.form-control {
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th,
td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input class="form-control" id="table_search" type="text" placeholder="Search..."></p>

<table>
  <thead>
    <tr>
      <th>Serial</th>
      <th>Student ID</th>
      <th>Name</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody id="table_body">
    <tr>
   <td></td>
      <td class="font-elephant">1</td>
      <td class="font-elephant">John</td>
      <td class="font-elephant"><span>438</span> Passed</td>
    </tr>
    <tr>
   <td></td>
      <td class="font-elephant">2</td>
      <td class="font-elephant">Kevin</td>
      <td class="font-elephant"><span>238</span> Failed</td>
    </tr>

    <tr>
   <td></td>
      <td class="font-elephant">3</td>
      <td class="font-elephant">Lux</td>
      <td class="font-elephant"><span>568</span> Passed</td>
    </tr>

    <tr>
   <td></td>
      <td class="font-elephant">4</td>
      <td class="font-elephant">Bro</td>
      <td class="font-elephant"><span>538</span> Passed</td>
    </tr>
  </tbody>
</table>

<script>


$(document).ready(function() {
  $("#table_search").on("keyup", function() {
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("table_search");
    filter = input.value.toUpperCase();
    table = document.getElementById("table_body");
    tr = table.getElementsByTagName("tr");
    for (i = 0, sr = 1; i < tr.length; i++) {
      td = tr[i].getElementsByTagName("td")[2];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
    sn = td = tr[i].getElementsByTagName("td")[0];
    sn.innerHTML = sr++;
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  });
  
  $('#table_search').keyup();
});
</script>