JSFiddle - React, Tailwind, and code Playground

by fallenreaper

CSS

table.rootFieldFunction{
    border: solid 1px black;
}

tr, td {
    /*
    border: solid 1px red;
    */
}

input#functName, a#newFunct, textarea#functContent, a#reassignFields, span#tarFieldList, select#functSelect
{
    width:97%;
    height: 97%;
    
}

a#newFunct, a#reassignFields, a#saveFunctionData
{
    background-color: cyan;
    border-radius: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border: solid 1px black;
    cursor: pointer;
}

a#newFunct:hover, a#reassignFields:hover, a#saveFunctionData:hover
{
    background-color: teal;
}

JavaScript

var TITLE = "Field ID:";
var ID = "123456";
var FUNCTION_LIST = "Function List";
var FUNCTION = "Function";

var ARROW = "-->";

var NEW_FUNCT = "New Function";
var DUMMY_FUNCTION_NAME = "Lenora([alpha],[beta]);";
var DUMMY_FUNCTION_CONTENT = "function Lenora(a,b)\n\t{\n\t$(a).html($(b));\n\t}";
var DUMMY_TARGET_FIELDS = "123,123123,01994,123501";
var REASSIGN_TARGETS = "Reassign Targets";
var SAVE = "Save";


$(function(){
	//table definition
	var $table = $("<table class='rootFieldFunction' />");
	var $tr = $("<tr />");
	var $td = $("<td />");
	
	//Title and ID
	var $titletd = $("<td />");
	var $titleSpan = $("<span id='titleSpan' />");
	var $idSpan = $("<span id='idSpan' />");
	$titleSpan.text(TITLE);
	$idSpan.text(ID);
	$titletd.append($titleSpan).append($idSpan);
	var x = $tr.clone().append($titletd);
	x.appendTo($table);
	
	//Function List data.
	var $listenertd = $("<td />");
	var $listenerSpan = $("<span id='functList' />").appendTo($listenertd);
	$listenerSpan.text(FUNCTION_LIST);
	x = $tr.clone().append($listenertd).appendTo($table);
	
	//Left Function selection box
	var $select = $("<select id='functSelect' />");
	$select.attr("size", "10");
	var $selecttd = $("<td />");
	$selecttd.append($select);
	
	//dummy data:
	for (var i = 0; i < 10; i++)
	{
		var $item = $("<option />");
		$item.text(FUNCTION + ": " + i);
		$select.append($item);
	}
	x = $tr.clone().append($selecttd).appendTo($table);
	x.append($td.clone().append(ARROW));
	
	//inner table section:
	var $innerTable = $("<table />");
	
    //new function
	var $addNew = $("<a id='newFunct'/>");
	$addNew.append(NEW_FUNCT);
	$innerTable.append($tr.clone().append($td.clone().attr("align","center").append($addNew)));
	
    //calling function title
    var $functName = $("<input id='functName' />");
    $functName.val(DUMMY_FUNCTION_NAME);
    $innerTable.append($tr.clone().append($td.clone().append($functName)));
    //function content
    var $functContent = $("<textarea id='functContent' />");
   ...