JSFiddle - React, Tailwind, and code Playground

by sandeepan_nits

HTML

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

<html>

    <head>

        <link rel="Stylesheet" href="gStyle.css" />
        
        <script type="text/javascript" src="gMain.js"></script>
        <script type="text/javascript" language="javascript">

           // Your chart object(s)
            var myChart;
                   
            // Function to hold all chart creation
            function initCharts() {

                myChart = new ganttChart("chart1");
                
                myChart.gAddBar("Dynamic!", "22/3/2010", "3/4/2010");
                
                myChart.gLoadData("Going  to the shop*4/3/2010*19/3/2010*Watching TV*9/3/2010*23/3/2010*Watching  TV*1/3/2010*23/3/2010*Watching TV*18/3/2010*28/3/2010*END  INPUT*1/3/2010*9/3/2010");
                                
                myChart.gDraw();

                myChart.gChangeBarColour(1, "#000000");

            }

        </script>
        
    </head>

    <body onload="initCharts()">


    

        <div id="chart1" class="gContainer">     
        
          
        </div>
        
    </body>

</html>

CSS

/* The outer container for the chart */
div.gContainer
{
    width:700px;
    position:relative;
    left:150px;
}

/* Year pannels wrapper */
div.gYearWrapper{

}

/* Standard year pannel */
div.gYear
{
    -moz-user-select:none;
    -khtml-user-select: none;
    float:left;
    text-align:center;
    font-size:18px;
    font-family:Arial;
    font-weight:bold;
    overflow: hidden;
    padding-top:5px;
    padding-bottom:5px;
}
/* When a month is hovered, the related year pannel goes to this class */
div.gYearHover
{
    background-color:#ffee99;
    border:1px solid #c0c0c0;
    margin-bottom:-1px;
    margin-top:-1px;
    margin-left:-1px;
    margin-right:-1px;
}
/* When the year is hovered, the year pannel goes to this */
div.gYearHoverY
{
    background-color:#ffee99;
}

/* When the years are too short, they go onto two lines, this is the style for top line */
.topDigits
{
    position:relative;
    top:7px;
    color:#c0c0c0;
}

/* Month pannels wrapper */
div.gMonthWrapper{

}
/* Standard month pannel */
div.gMonth
{
    -moz-user-select:none;
    -khtml-user-select: none;
    float:left;
    text-align:center;
    font-size:15px;
    font-family:Arial;
    font-weight:bold;
    overflow: hidden;
    padding-top:5px;
    padding-bottom:5px;
}

/* When the month is hovered, the month pannel goes to this */
div.gMonthHover{
    background-color:#ffee99;
    border-bottom:1px solid #c0c0c0;
    border-left:1px solid #c0c0c0;
    border-right:1px solid #c0c0c0;
    margin-bottom:-1px;
    margin-left:-1px;
    margin-right:-1px;
}

/* When the year pannel is hovered, the related month pannels go to this */
div.gMonthHoverY{
    background-color:#ffee99;
}

/* Day pannel wrappers */
div.gDayWrapper{

    border:1px solid #c0c0c0;
    margin-left:-1px;
    margin-right:-1px;
    background-image: url(images/daysBG.jpg);

}

/* Standard day pannel */
div.gDay
{
    -moz-user-select:none;
    -khtml-user-select: none;
    float:left;
    text-align:center;
   ...

JavaScript

$(function() {
    $('tr.parent')
        .css("cursor","pointer")
        .attr("title","Click to expand/collapse")
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle();
        });
    $('tr[@class^=child-]').hide().children('td');
});

$(document).ready(function() {
  var orderTable = $("#example");
 
   
    $("#btnAdd").click(function() {
        alert($(this).attr("id"));
   //Take the text, and also the ddl value and insert as table row.
   var newRow = $("<tr  class=child-row123><td  class=brdr>&nbsp;&nbsp;</td><td  class=brdr></td><td  class=brdr>&nbsp;&nbsp;</td><td  class=brdr>&nbsp;&nbsp;</td><td><input  name=checkbox4  type=checkbox  id=checkbox4  /></td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td><td>&nbsp;&nbsp;</td></tr>");
  // alert("appenfing");
        
   $("#example").append(newRow);
 //  var $orderTable = $("#example");

  });
    
     $("#btnDel").click(function() {

        alert("del");
        $.each($("tr.child-row123 input"), function(key, value) { 
         // alert(key + ': ' + value); 
        });         
             
     
   });
});