JSFiddle - React, Tailwind, and code Playground

by Karl Baker

HTML

<div id="refresh">
        <table id="myTable"  class="table">
            <tr>
                <th class="col_1">TH1_Data</th>
                <th class="col_2">TH2_Data</th>
                <th class="col_2">TH3_Data</th>
                <th class="col_3">TH4_Data</th>
                <th class="col_3">TH5_Data</th>
                <th class="col_3">TH6_Data</th>
            </tr>
            <tr align="center" class="portRow">
                <td class="col_1">Col1_Data</td>
                <td class="col_2">Col2_Data</td>
                <td class="col_2">Col3_Data</td>
                <td class="col_3">Col4_Data</td>
                <td class="col_3">Col5_Data</td>
                <td class="col_3">Col6_Data</td>
            </tr>
        </table>
    </div>

CSS

#myTable {
	float:left;
	border:1px solid #dfdfdf;
	border-collapse:collapse;
	width:100%;

}
.selected {
    background: #00afd7;
}

JavaScript

//  Highlight td row on click. BG color defined in CSS
$("#myTable").on('click','.portRow',function(e){
			e.preventDefault();
			$(this).toggleClass("selected");
			$(".port").toggleClass("tagged");
});
// 15 second interval to refresh tableRefresh function
setInterval("tableRefresh();",15000);

// tableRefresh Function: Defines what HTML ID to refresh
function tableRefresh(){
   $('#refresh').load(location.href + ' #myTable');
}