javascript - Function not defined using onkeyup for table search -
this question has answer here:
- why simple jsfiddle not work? 5 answers
using similar functionality table search @ w3schools, i'm getting error function used onkeyup
not defined on input element. name of function same, shouldn't issue.
html
<div class="row"> <div class="container form-container"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 search-form"> <input type="text" id="search" onkeyup="tablesearch()" placeholder="search names.." title="search name, practice area or location"> </div> </div> <div class="results"> <div class="col-lg-12"> <div id="no-more-tables"> <table id="results" class="order-table col-md-12 cf"> <thead class="cf"> <tr> <th class="numeric">field 1</th> <th class="numeric">field 2</th> <th class="numeric">field 3</th> <th class="numeric">field 4</th> <th class="numeric">field 5</th> </tr> </thead> <tbody> <tr> <td data-title="" class="name"><a href="user-1">user 1</a><a href="tel:(407) 420-1414"><span class="phone"><i class="fa fa-phone phone"></i></span></a><a href="mailto:user1@site.com"><span class="email"><i class="fa fa-envelope-o email"></i></span></a></td> <td data-title="location"></td> <td data-title="practice area" class=""></td> <td data-title="email" class="numeric desktop-only"><a href="mailto:user1@site.com">user1@site.com</a></td> <td data-title="phone" class="numeric desktop-only"><a href="tel:(111) 111-1111">(111) 111-1111</a></td> </tr> <tr> <td data-title="" class="name"><a href="user-2">user 2</a><a href="tel:1111111111"><span class="phone"><i class="fa fa-phone phone"></i></span></a><a href="mailto:user2@site.com"><span class="email"><i class="fa fa-envelope-o email"></i></span></a></td> <td data-title="location"></td> <td data-title="practice area" class=""></td> <td data-title="email" class="numeric desktop-only"><a href="mailto:user2@site.com">user2@site.com</a></td> <td data-title="phone" class="numeric desktop-only"><a href="tel:1111111111">1111111111</a></td> </tr> </tbody> </table> </div> </div> </div> </div>
javascript
function tablesearch() { var input, filter, table, tr, td, i; input = document.getelementbyid("search"); filter = input.value.touppercase(); table = document.getelementbyid("results"); tr = table.getelementsbytagname("tr"); (i = 0; < tr.length; i++) { tds = tr[i].getelementsbytagname("td"); var found = false; //---second loop goes on tds in tr ---can modified required go on tds (j = 0; j < tds.length; j++) { td = tds[j]; if (td) { if (td.innerhtml.touppercase().indexof(filter) > -1) { found = true; break; } } } if (found) tr[i].style.display = ""; else tr[i].style.display = "none"; } }
jsfiddle: link
your method tablesearch
in onload
load-type in fiddle's javascript options, hence not in global scope.
check updated fiddle's javascript options. have selected 'wrap in head' put in global scope accessible event handler.
Comments
Post a Comment