Edit in JSFiddle


              
<script type="text/javascript">
    /*<![CDATA[*/
    function filter (phrase, _id) {
      var words = phrase.value.toLowerCase().split(" ");
      var table = document.getElementById(_id);
      var ele;
      for (var r = 0; r < table.rows.length; r++ ) {
          ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
        var displayStyle = 'none';
        for (var i = 0; i < words.length; i++) {
            if (ele.toLowerCase().indexOf(words[i])>=0) {    displayStyle = '';}
            else { displayStyle = 'none';  break; }
        }
          table.rows[r].style.display = displayStyle;
      }
    }
    /*]]>*/
    </script>
  <table id="ProcessTable" class="grid" >

<caption>
   <label title="start typing letters or numbers to limit">Filter:</label>
   <input type="search" name="filt" id="Filter" 
    placeholder="enter filter terms"
    onkeyup="filter(this, 'ProcessBody', '1')"  />
</caption>

<thead>
  <tr class="header">
  <th>Name</th>
  <th>ObjectId</th>
  </tr>
</thead>
<tbody id="ProcessBody">
<tr>
  <td>Prog (v1)</td>
  <td class="atr">7121</td>
</tr>
<tr>
  <td>Prog (v4)</td>
  <td class="atr">7124</td>
</tr>
<tr>
  <td>Prog (v2)</td>
  <td class="atr">7122</td>
</tr>
</tbody> 


</table>

Orignal Script Source: <a href="http://www.vonloesch.de/node/23?filt=j">http://www.vonloesch.de/node/23?filt=j</a>
/*DEFAULT TABLE STYLES------*/
table {font-family:"Droid Sans", "Trebuchet MS"}
th {
    padding:2px;                        
    background-color: #f0f0f0;
    border:1px gainsboro solid;
}
td { 
    padding: 2px;
    border:1px gainsboro solid;
}
tr:nth-child(odd) { background-color: #fff;}
tr:nth-child(even) { background-color: #f0f0f0;}
tr:hover {background-color:#ccc;}

caption {
    padding:2px;
    color:gainsboro;
    background-color:#1e5799;
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
    border:1px gainsboro solid;
}

#ProcessTable {width:400px}

.atr {text-align:right}