html Filtrar elementos de una tabla al ingresar texto en un input，segúnciertacolumna

Posted 2021-05-11

<!-- CSS -->
<style>
    /* enable absolute positioning */
    .inner-addon {
      position: relative;
    }

    /* style glyph */
    .inner-addon .glyphicon {
      position: absolute;
      padding: 10px;
      pointer-events: none;
    }

    /* align glyph */
    .left-addon .glyphicon  { left:  0px;}
    .right-addon .glyphicon { right: 0px;}

    /* add padding  */
    .left-addon input  { padding-left:  30px; }
    .right-addon input { padding-right: 30px; }
    .rating .glyphicon {font-size: 22px;}
    .rating-num { margin-top:0px;font-size: 54px; }
</style>


<!-- Input text -->
<div class="inner-addon left-addon">
  <i class="glyphicon glyphicon-search"></i>
  <input id="input_text_id" type="text" autocomplete="off" class="form-control" placeholder="Filter by X..." onkeyup="filterByX()">
</div>

<script>
    //***********************************************************************
    // JS Function
    //***********************************************************************
    function filterByX() {
        // Declare variables 
        var input, filter, table, tr, td, i;
        input = document.getElementById("input_text_id");
        filter = input.value.toUpperCase();
        table = document.getElementById("table_target_id");
        tr = table.getElementsByTagName("tr");

        // Loop through all table rows, and hide those who don't match the search query
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[1];// This is the column index you want to filter
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }
        }
    }
</script>