Search table contents using javascript -
i working on javascript. in code have table , textbox. when enter data in textbox should show particular value typed doesn't search data table. how search data in table?
here's jsfiddle http://jsfiddle.net/surwn/
html:
<table name="tablecheck" class="data" id="results" > <thead> <tr> <th> </th> <th> </th> <th><center> <b>course code</b></center></th> <th><center>course name</center></th> </tr> </thead> <tbody> <tr id="rowupdate" class="tableheaderfooter"> <td > <center> <input type="text" name="input" value="course" ></center> <center> <input type="text" name="input" value="course1" ></center> <center> <input type="text" name="input" value="course2" ></center> </td> <td> <center> <input type="text" name="input" value="subject" ></center> <center> <input type="text" name="input" value="subject1" ></center> <center> <input type="text" name="input" value="subject2" ></center> </td> </tr> </tbody> </table > <form action="#" method="get" onsubmit="return false;"> <label for="q">search here:</label><input type="text" size="30" name="q" id="q" value="" onkeyup="dosearch();" /> </form> javascript:
<script type="text/javascript"> //<!-- function dosearch() { var q = document.getelementbyid("q"); var v = q.value.tolowercase(); var rows = document.getelementsbytagname("tr"); var on = 0; ( var = 0; < rows.length; i++ ) { var fullname = rows[i].getelementsbytagname("td"); fullname = fullname[0].innerhtml.tolowercase(); if ( fullname ) { if ( v.length == 0 || (v.length < 3 && fullname.indexof(v) == 0) || (v.length >= 3 && fullname.indexof(v) > -1 ) ) { rows[i].style.display = ""; on++; } else { rows[i].style.display = "none"; } } } } //--> </script>
checking chrome console, seems innerhtml 'fullname' returning error:
var fullname = rows[i].getelementsbytagname("td"); fullname = fullname[0].innerhtml.tolowercase(); that's because first tr tag have in thead , doesn't have td @ all. changing start of loop 1 fix that:
for ( var = 1; < rows.length; i++ ) { //... , on 
Comments
Post a Comment