Skip to content

Instantly share code, notes, and snippets.

@sebackend
Last active May 4, 2017 15:49
Show Gist options
  • Save sebackend/c72edb2b51df3f30e93944c86c3ebdbf to your computer and use it in GitHub Desktop.
Save sebackend/c72edb2b51df3f30e93944c86c3ebdbf to your computer and use it in GitHub Desktop.
Filtrar elementos de una tabla al ingresar texto en un input, según cierta columna
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment