JSFiddle - React, Tailwind, and code Playground

by ksevksev

HTML

<div id="everything" style="border: thin green solid;">
<select id="dRelation" name="dRelation">
    <option value="and">and</option>
    <option value="or">or</option>
</select>

<br><br>

<div style="white-space:nowrap;"><input type="text" name="dName" id="dName" />&nbsp;|&nbsp;<select id="dOperator" name="dOperator">
    <option name="EQUAL">=</option>
    <option name="NOT_EQUAL">!=</option>
    <option name="LESS_THAN">&lt;</option>
    <option name="GREATER_THAN">&gt;</option>
    <option name="LESS_THAN_OR_EQUAL">&lt;=</option>
    <option name="GREATER_THAN_OR_EQUAL">&gt;=</option>
    <option name="IN">in</option>
    <option name="NOT_IN">!in</option>
    <option name="EMPTY">empty</option>
</select>&nbsp;|&nbsp;<input type="text" name="dValue" id="dValue" /></div>

<br><br>

</div>

CSS

.nowrap
{
    white-space: nowrap;
}

JavaScript

var helpAuth = {};
helpAuth.edit = {};
helpAuth.edit.hdOperators = [];
helpAuth.edit.hdRelations = [];

helpAuth.edit.hdRelations.push("and");
helpAuth.edit.hdRelations.push("or");

helpAuth.edit.hdOperators.push({"name":"EQUAL", "desc":"="});
helpAuth.edit.hdOperators.push({"name":"NOT_EQUAL", "desc":"!="});
helpAuth.edit.hdOperators.push({"name":"LESS_THAN", "desc":"<"});
helpAuth.edit.hdOperators.push({"name":"GREATER_THAN", "desc":">"});
helpAuth.edit.hdOperators.push({"name":"LESS_THAN_OR_EQUAL", "desc":"<="});
helpAuth.edit.hdOperators.push({"name":"GREATER_THAN_OR_EQUAL", "desc":">="});
helpAuth.edit.hdOperators.push({"name":"IN", "desc":"in"});
helpAuth.edit.hdOperators.push({"name":"NOT_IN", "desc":"!in"});
helpAuth.edit.hdOperators.push({"name":"EMPTY", "desc":"empty"});

var t = "";

for (var i = 0; i < helpAuth.edit.hdOperators.length; i++)
{
    t += helpAuth.edit.hdOperators[i];
    t += "\n";
}


//alert(helpAuth.edit.hdRelations);
//alert(t);

var obj = $("<div style=\"border:thin tan solid;\"></div>");
obj.addClass("nowrap");
var name = $("<input type=\"text\" name=\"dName\" id=\"dName\" \>");
var value = $("<input type=\"text\" name=\"dValue\" id=\"dValue\" \>");
var ops = $("<select name=\"dOperator\" id=\"dOperator\"></select>");
$(helpAuth.edit.hdOperators).each(function (i, el){
        var op = $("<option name=\"" + el.name + "\">" + el.desc + "</option>");
        ops.append(op);
    });
obj.append(name);
obj.append("&nbsp;|&nbsp;");
obj.append(ops);
obj.append("&nbsp;|&nbsp;");
obj.append(value);


obj.blur(function(event){alert("Hey you just blurred me!");});


$("#everything").append(obj);