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>