JSFiddle - React, Tailwind, and code Playground

by bluemagic

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <!-- <meta http-equiv="refresh" content="300">-->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <link type="text/css" rel="stylesheet" href="cloudrunner.css">
    <link type="text/css" rel="stylesheet" href="jquery.dataTables.css">
    <link type="text/css" rel="stylesheet" href="custom.css">
     <style type="text/css">
        .dataTable th {
            padding: 30px;
            color: white;
            border: 1px solid grey;
        }
        
        table.dataTable thead th,
        table.dataTable thead {
            border-bottom: 1px solid grey;
        }
        
        label {
            color: white;
        }
        
        .dataTables_length {
            margin-bottom: 20px;
        }
        table#tasks td{
			padding: 5px;
			border: 0;
		}
		table#tasks th{
			padding: 10px;
			border: 0;
			color: black;
		}
		p{
			margin: 0;
		}
    </style> 

    <script type="text/javascript" language="javascript" src="cloudrunner.js"></script>
    <script type="text/javascript" language="javascript" src="jquery-1.11.0.min.js"></script>
    <script type="text/javascript" language="javascript" src="jquery.dataTables.min.js"></script>
	<script type="text/javascript" language="javascript" src="cloudrunnerdashboard.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#mytable').DataTable({
                "bautoWidth": false,
                "aoColumns": [{
                    "sWidth": "10%"
                }, {
                    "sWidth": "10%"
                }, {
                    "sWidth": "10%"
                }, {
                    "sWidth": "10%"
                }, {
                    "sWidth": "25%"
                }, {
                    "sWidth": "20%"
        ...

JavaScript

var jobsStatusTable = "";
function getJobsStatusTable( projectNodeName ) 
{	
	//alert(projectNodeName);
	if (window.XMLHttpRequest) {
		var xhr = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		var xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}

	var parameters = "projectNodeName=" + encodeURI( projectNodeName );

	var url = "http://cii6w709:8080/cloudrunner/cloudrunner/projectbuilddashboard"; //change
	xhr.open( 'POST', url , true );
	xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
	//xhr.setRequestHeader( "Content-length", parameters.length );
	//xhr.setRequestHeader( "Connection", "close" );
	
	xhr.send( parameters );
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			var responseMessage = xhr.responseText;	
			document.getElementById("jobStatusRows").innerHTML = responseMessage;
			jobsStatusTable = responseMessage;	
		}
	};	
	

}