Skip to content

Instantly share code, notes, and snippets.

@sebackend

sebackend/Table-Filter-by-Column-VanillaJS.html

Last active May 4, 2017 15:49
Download ZIP

Revisions

  1. sebackend revised this gist May 4, 2017. 2 changed files with 57 additions and 56 deletions.
    57 changes: 57 additions & 0 deletions Table-Filter-by-Column-VanillaJS.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    <!-- 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>
    56 changes: 0 additions & 56 deletions Table-Filter-by-Column-VanillaJS.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,56 +0,0 @@
    //***********************************************************************
    // 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>
    //***********************************************************************
    // 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";
    }
    }
    }
    }
  2. sebackend renamed this gist May 4, 2017. 1 changed file with 0 additions and 0 deletions.
    0 Table Filter by Column Vanilla JS → Table-Filter-by-Column-VanillaJS.js
    View file
    File renamed without changes.
  3. sebackend created this gist May 4, 2017.
    56 changes: 56 additions & 0 deletions Table Filter by Column Vanilla JS
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    //***********************************************************************
    // 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>
    //***********************************************************************
    // 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";
    }
    }
    }
    }