Last active
May 4, 2017 15:49
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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