JSFiddle - React, Tailwind, and code Playground

by grwebguy

HTML

<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>

CSS

/*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:#1e5799;
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
    border:1px gainsboro solid;
}

#ProcessTable {width:400px}

.atr {text-align:right}

JavaScript

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;
 }
}