JSFiddle - React, Tailwind, and code Playground

by philderksen

HTML

<html>
<head>


        <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
      
</head>
<body>
<h1> This is an example with 1 table, with JSON source, and "tree table" type functionality</h1>
<br/>
<br/>
 <table id="productRanking" style="font:bold;margin:1px;padding:1px;" width="100%" align="center" class="rich-table gridTable">
    <thead class="rich-table-headercell tableheadSmall">
        <tr>
            <th>type</th>
            <th>id</th>
            <th width="25%" id="product1Col1">Product</th>
            <th width="15%" id="product1Col2">Product Ranking</th>
            <th width="10%" id="product1Col3">Date</th>
            <th width="15%" id="product1Col4">User Name</th>
            <th width="30%" id="product1Col5">Comment</th>
            <th width="5%" id="product1Col6"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
                <td>product</td>
                <td>1234</td>
                <td>Best Buy</td>
                <td>4</td>
                <td>Jul 16, 2012</td>
                <td>Alice Applegate</td>
                <td><span class="expandDetail">Test
                    </span></td>
                <td></td>
            </tr>
                <tr>
                    <td>product</td>
                    <td>2345</td>
                    <td>Circuit City</td>
                    <td>2</td>
                    <td>Jul 31, 2012</td>
                    <td>Alice Applegate</td>
                    <td class="expandDetail">Special Attn: Product Info Here</td>
                    <td></td>
                </tr>
    </tbody>
</table>
<br/>
<br/>
<br/>
</body>
</html>

CSS

.gridTable {
      border-collapse:collapse;
      border:1px solid #d0d7e5;
      margin:0px auto;
}

.gridTable td {
      border:1px solid #d0d7e5;
      text-align:center;
      padding:0px;
}


table {
    border-spacing: 0px;
}

.data_table{
    border:1px;
    border-color:silver;
    border-style:solid;
}

.data_table th {
    border-left-width:1px;
    border-left-color:white;
    border-left-style:solid;
    
    border-top-width:1px;
    border-top-color:silver;
    border-top-style:solid;
}

.data_table tr{
    border-left-width: 1px;
    border-left-color: silver;
    border-left-style: solid;
    
    border-bottom-width: 1px;
    border-bottom-color:silver;
    border-bottom-style:solid;
}

.data_table td {
    border-left-width: 1px;
    border-left-color: silver;
    border-left-style: solid;
    
    border-bottom-width: 1px;
    border-bottom-color:silver;
    border-bottom-style:solid;
}

.control_center {
    width: 25px;
}

input.btn_delete{
    background-image: url(../images/delete-icon.png);
    background-color: transparent;
    background-repeat: no-repeat;
    border:none;
    curser: pointer;
    height: 14px;
    width: 14px;

}

JavaScript

var analystName = 'Alice Applegate';
var analystNames = Array('Alice Applegate','Joe Shmoe');
var productHistoryID = "245678";
var analystUserID = "192837465";

//hard coded here for example, this would be pulled from a datasource otherwise.
var jsonData = '{"aaData":[{"type":"product","id":4048,"product":"","product1":3,"date":"2012-07-31","analyst":"Alice Applegate","comment":"Special Attn: Issuer Info","editable":""},';
jsonData +='{"type":"product","id":4045,"product":"","product1":4,"date":"2012-07-18","analyst":"Alice Applegate","comment":"Comment Here","editable":""},';
jsonData += '{"type":"product","id":4044,"product":"","product1":4,"date":"2012-07-18","analyst":"Alice Applegate","comment":"Comment here","editable":""},';
jsonData += '{"type":"product","id":4042,"product":"","product1":1,"date":"2012-07-31","analyst":"Alice Applegate","comment":"Not good","editable":""},';
jsonData += '{"type":"product","id":4041,"product":"","product1":1,"date":"2012-07-31","analyst":"Alice Applegate","comment":"Not good","editable":""}]}';


function callAjaxToDelete(dataID, rowNumber){
//This would be dynamic based on some retrieved variables, I have hardcoded some of this above.
    var deleteAJAXParams = "param1="+param1ID;
    deleteAJAXParams += "&action=actionParam";
    deleteAJAXParams += "&dataID="+dataID;
    deleteAJAXParams += "&analystName="+analystName;
    //Doesn't actually do anything, I just have this here still as an example to show how it could be done when calling a Java Servlet
    var deleteSurveillance = confirm("Delete this Surveillance History?");
    if(deleteSurveillance){
        jQuery.ajax({
            cache: false,
            url:"../JSON/JSONServlet?"+deleteAJAXParams,
            async: false,
            dataType:'json',
            success: function(thisData){
                    riskRankTable.fnDraw();
            }
        });
    }
}


function fnFormatDetails ( tableData, nTr, tableParam )
{
    //This is the data for each...