Search table contents using javascript

Question

I am currently working on javascript. In this code I have a table and a textbox. When I enter data in the textbox it should show the particular value that I typed but it doesn't search any data from the table. How do I search data in the table?

Here's a jsfiddle http://jsfiddle.net/SuRWn/

HTML:

<table name="tablecheck" class="Data" id="results" >
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th>&nbsp;</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;
    for ( var i = 0; i < 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>

Answer 1

Why don't you use JQuery DataTables? The plugin has a really nice table view as well as automatically enabled search textbox, and should fit in easily with your JavaScript/PHP solution.

See example table below:

The plugin is well-documented, and widely used. It should be very easy to drop in into an existing application, and style it accordingly.

Hope this helps!

Answer 2

See this link.

HTML:

<table name="tablecheck" class="Data" id="results" >
    <thead>
        <tr>
            <th>Course</th>
            <th>Subject</th>
            <th>COURSE CODE</th>
            <th>COURSE NAME</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="text" value="course" /></td>
        <td><input type="text" value="subject" /></td>
        </tr>
        <tr>
            <td><input type="text" value="course1" /></td>
            <td><input type="text" value="subject1" /></td>
        </tr>
        <tr>
            <td><input type="text" value="course2" /></td>
            <td><input type="text" value="subject2" /></td>
        </tr>
    </tbody>
</table>
Search here (with jQuery):<input type="text" size="30" value="" onKeyUp="doSearchJQ(this);" /><br />
Search here:<input type="text" size="30" value="" onKeyUp="doSearch(this);" />  

Javascript:

function doSearchJQ(input) {
    var value = $(input).val();
    if (value.length > 0) {
        $("#results tbody tr").css("display", "none");
        $('#results input[value^="' + value + '"]').parent().parent().css("display", "table-row");
    } else {
        $("#results tbody tr").css("display", "table-row");
    }
}
function doSearch(input){
    var value = input.value;
    var table = document.getElementById('results');
    var tbody = table.querySelector("tbody");
    var rows = tbody.querySelectorAll("tr");
    var visible, row, tds, j, td, input;
    for (var i = 0; i < rows.length; i++) {
        visible = false;
        row = rows[i];
        tds = row.querySelectorAll("td");
        for (j = 0; j < tds.length; j++) {
            td = tds[j];
            input = td.querySelector("input");
            console.log(input.value.indexOf(value));
            if (input.value.indexOf(value) > -1) {
                visible = true;
                break;
            }
        }
        if (visible) {
            row.style.display = "table-row";
        } else {
            row.style.display = "none";
        }
    }
}  

With jquery it's more compact function. But you can use clear javascript doSearch.

Answer 3

yuvi is correct in his answer. I've incorporated this in a fiddle - http://jsfiddle.net/dBs7d/8/ - that also contains the following changes:

• Inputs with course and subject grouped into individual rows.
• td tags align underneath th tags.
• Code refactored to improve readability.
• Instead of checking the html of the td tags I've changed it to check the value attribute of the input tags. This means you can change the value of the input and still search.
• I also changed the style alteration to use backgroundColor. This can easily be reverted to display.

Answer 4

checking with chrome console, it seems that innerHtml for the 'fullname' is returning an error:

var fullname = rows[i].getElementsByTagName("td");
fullname = fullname[0].innerHTML.toLowerCase();

That's because the first tr tag you have is in the thead and it doesn't have any td at all. Changing the start of your loop to 1 will fix that:

for ( var i = 1; i < rows.length; i++ ) {    //... and so on