JSFiddle - React, Tailwind, and code Playground

by betsyjsg

HTML

<script src="https://raw.github.com/dbunic/REDIPS_drag/master/redips-drag-min.js"></script>
<body onload="REDIPS.drag.init()">
    <div id="drag">
      <table class="tbl1">
        <colgroup>
          <col width="30"/>
          <col width="30"/>
          <col width="220"/>
        </colgroup>
        <tbody>
          <tr>
            <th colspan="3" class="mark">Table 1</th>
          </tr>
          <tr class="rd">
            <td class="rowhandler"><div class="drag row"></div></td>
            <td><input class="mapLayer" type="checkbox" id="lyr_firstvalue" name="lyr_firstvalue" value="true" checked></td>
            <td>First Value</td>
          </tr>
          <tr class="rl">
            <td class="rowhandler"><div class="drag row"></div></td>
            <td><input class="mapLayer" type="checkbox" id="lyr_secondvalue" name="lyr_secondvalue" value="true" checked></td>
            <td>Second Value</td>
          </tr>
          <tr class="rd">
            <td class="rowhandler"><div class="drag row"></div></td>
            <td><input class="mapLayer" type="checkbox" id="lyr_thirdvalue" name="lyr_thirdvalue" value="true" checked></td>
            <td>Third Value</td>
          </tr>
          <tr>
            <td colspan="3" class="mark"><span></span></td>
          </tr>
        </tbody>
      </table>
    </div>
          <p/>
          <center>
              <input type="button" value="Update Table" onclick="updateTest()">
          </center>

CSS

body {
	font-family: arial;
	margin: 0px;
}

/* make drag container visible */
#drag {
	border: 2px dashed LightBlue;
	width: 300px;
	padding: 5px;
	margin: 10px auto;
}

/* set border-collapse */
div#drag table {
/* 	border-collapse: collapse; */
	border-collapse: separate;
	border-spacing: 0px;
	width: 300px;
}
	/* define margin below first table */
	.tbl1 {
		margin-bottom: 5px;
	}

/* set table row height */
div#drag table tr {
	height: 10px;
}

div#drag td {
	border: 0px groove black;
}

/* table titles */
div#drag th {
	font-size: 10pt;
}

/* drag object (DIV inside table cell) */
.drag {
	margin: auto;
	margin-bottom: 1px;
	margin-top: 1px;
	text-align: center;
	font-size: 10pt;
	width: 70px;
	height: 10px;
	line-height: 10px;
	border-width: 2px;
	border-style: solid;
	background-color: white;
	/* round corners */
	border-radius: 4px; /* Opera, Chrome */
	-moz-border-radius: 4px; /* FF */
}

/* blue DIV elements */
.blue {
	border-color: SteelBlue;
}

/* orange DIV elements */
.orange {
	border-color: #FF8A58;
}

/* DIV row handlers (blue left column) */
.row {
	width: 14px;
	margin: 2px;
	border-color: SteelBlue;
	background-color: SteelBlue;
}

/* row handler TD background color */
.rowhandler {
	background-color: #76ACDA;
}

/* marked cells (forbidden access for header and message line) */
.mark {
	color: white;
	background-color: #aaa;
	text-align: center;
}

/* row dark */
.rd {
	background-color: #ddd;
        font-family: arial;
        font-size: 10px;
}

/* row light */
.rl {
	background-color: #eee;
        font-family: arial;
        font-size: 10px;
}

/* cell dark */
.cdark {
	background-color: #C6C8CB;
}

JavaScript

function updateTest() {
    //alert("In the update");
    var tableList = "";
    tableList += '<table class="tbl1">';
    tableList += '<colgroup>';
    tableList += '<col width="30"/>';
    tableList += '<col width="30"/>';
    tableList += '<col width="220"/>';
    tableList += '</colgroup>';
    tableList += '<tbody>';
    tableList += '<tr>';
    tableList += '<th colspan="3" class="mark">Table 2</th>';
    tableList += '</tr>';
    tableList += '<tr class="rd">';
    tableList += '<td class="rowhandler"><div class="drag row"></div></td>';
    tableList += '<td><input class="mapLayer" type="checkbox" id="lyr_newfirstvalue" name="lyr_newfirstvalue" value="true" checked></td>';
    tableList += '<td>New First Value</td>';
    tableList += '</tr>';
    tableList += '<tr class="rl">';
    tableList += '<td class="rowhandler"><div class="drag row"></div></td>';
    tableList += '<td><input class="mapLayer" type="checkbox" id="lyr_newsecondvalue" name="lyr_newsecondvalue" value="true" checked></td>';
    tableList += '<td>New Second Value</td>';
    tableList += '</tr>';
    tableList += '<tr class="rd">';
    tableList += '<td class="rowhandler"><div class="drag row"></div></td>';
    tableList += '<td><input class="mapLayer" type="checkbox" id="lyr_newthirdvalue" name="lyr_newthirdvalue" value="true" checked></td>';
    tableList += '<td>New Third Value</td>';
    tableList += '</tr>'; 
    tableList += '<tr>';
    tableList += '<td colspan="3" class="mark"><span></span></td>';
    tableList += '</tr>';
    tableList += '</tbody>';
    tableList += '</table>';
    //alert(tableList); 
    document.getElementById("drag").innerHTML = tableList;
}