Javascript filter Table/GridView Search Pop Row example

well, in my workplace the guys used the jq grid plugin and changed acostumized it, but it seems too much work for doing just the search pop row, so that how it went:

*notice that in my version there are columns to be hidden, so if u dont have some like that u can just skip all the "display == "none")" parts.

part 1: create the pop row with txt's,
<script type="text/javascript">
$(function () {
    var table = document.getElementById("dgvUsersCompanies");
    var body = table.getElementsByTagName('tbody')[0];
    var headerRow = body.rows[0];

    var row = body.insertRow(1);
    row.setAttribute("id", "theSearchRow");

    var cell0 = row.insertCell(0);
    cell0.innerHTML =
       "<input type='button' value='Search:' onclick='FilterDGV()' />";
    for (var i = 1; i < headerRow.cells.length; i++) {
       if (headerRow.cells[i].style.display == "none") {
           var cell = row.insertCell(i);
           cell.setAttribute("class", "cellDisplayNone");
       }
       else {
          var headWidth = $(headerRow.cells[i]).width();
          var cell = row.insertCell(i);
          cell.innerHTML = "<input id='" + headerRow.cells[i].innetText +
              "Search' type='text'" + " style='width:" +
              headWidth + "px' value=''" +
              " onkeypress='{if (event.keyCode==13) FilterDGV();}' />";
       }
    }
               
    document.getElementById("theSearchRow").style.display = "none";
    $("#btnMakeSearch").click(function () {
         var thediv = document.getElementById("theSearchRow");
         if (thediv.style.display != "none") {
             thediv.style.display = "none"
         }
         else {
            thediv.style.display = "block"
         }
    });
});
</script>

part 2: FITLER!
<script type="text/javascript">
function FilterDGV() {
     var table = document.getElementById("dgvUsersCompanies");
     var body = table.getElementsByTagName('tbody')[0];
     var rows = body.rows;
     var searchRowCells = document.getElementById("theSearchRow").cells;

     for (var i = 2; i < rows.length; i++) {
         rows[i].style.display = "block";

         for (var j = 1; j < rows[i].cells.length; j++) {
             if (rows[0].cells[j].style.display == "none") {
                 continue;
             }

             var s = rows[i].cells[j].innerText.toLowerCase();
             var s2 = searchRowCells[j].firstChild.value.toLowerCase();
             if (s2 != "" && s.indexOf(s2) == -1) {
                rows[i].style.display = "none";
             }
         }
    }
}
</script>

my 1st real js duty, hope u like it
example with the button (my original table had checkbox in col 0)
http://jsbin.com/ixadic/12/edit#preview
and here is a version W/O the search btn in col 0 but another search text instead
http://jsbin.com/ixadic/13/edit#preview
THX to RNAN for the free table