JSFiddle - React, Tailwind, and code Playground

by Rahul Desai

HTML

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="http://bio.mq.edu.au/Tools/jquery/plugins/riklomas-quicksearch/jquery.quicksearch.js"></script>
	</head>

	<body id="tools">
        <br>	
		<form action="#">
			<fieldset>
				<input type="text" name="search" value="" id="id_search" placeholder="Search..." autocomplete="off"/> <span class="loading">Loading...</span>
			</fieldset>
		</form>	
<br>
<table id="matrix" cellpadding="5" cellspacing="5" border=1>
<thead>
<tr>
<th width="75%">Fluid</th>
<th width="5%">FKM</th>
<th width="5%">EPDM</th>
<th width="5%">NBR</th>
<th width="5%">VMQ</th>
<th width="5%">FVMQ</th>

</tr>
</thead>

<tbody>
	<tr id="noresults">
		<td colspan="6">No Results</td>
	</tr>
	
<tr>
<th>Abietic Acid</th>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>

<td>*</td>
</tr>

<tr>
<th>Acetaldehyde</th>
<td>4</td>
<td>2</td>
<td>4</td>
<td>2</td>
<td>4</td>

</tr>

<tr>
<th>Acetamide</th>
<td>3 </td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>1</td>
</tr>

<tr>
<th>Acetanilide</th>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
</tr>

<tr>
<th>Acetic Acid, 30%</th>

<td>3 </td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
</tr>

<tr>
<th>Acetic Acid, Glacial</th>
<td>4</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>4</td>
</tr>

<tr>
<th>Acetic Anhydride</th>
<td>4</td>
<td>2</td>

<td>4</td>
<td>3 </td>
<td>4</td>
</tr>

<tr>
<th>Acetoacetic Acid</th>
<td>*</td>
<td>*</td>
<td>*</td>

<td>*</td>
<td>*</td>
</tr>

<tr>
<th>Acetone</th>
<td>4</td>
<td>1</td>
<td>4</td>
<td>3 </td>

<td>4</td>
</tr>

<tr>
<th>Acetone Cyanohydrin</th>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>

</tr>

<tr>
<th>Acetonitrile</th>
<td>1</td>
<td>1</td>
<td>3 </td>
<td>*</td>
<td>*</td>
</tr>

<tr>
<th>Acetophenetidin</th>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
</tr>

<tr>
<th>Acetophenone</th>

<td>4</td>
<td>1</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>

<tr>
<th>Acetyl...

CSS

body{
	font-family:Arial, Helvetica, sans-serif;
}
thead{
    background-color: yellow;
}

JavaScript

$(document).ready(function () {
    $("#id_search").quicksearch("table tbody tr", {
        noResults: '#noresults',
        stripeRows: ['odd', 'even'],
        loader: 'span.loading'
    });
    $("#id_search").focus();
});