JSFiddle - React, Tailwind, and code Playground

by homer2

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css">
<a href="#" id="addAttribute">Add an Attribute</a>

<table border="1" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
            <th>Id</th>
            <th>
                Is Default
            </th>
            <th>
                Display Order
            </th>
            <th>
                Label Text
            </th>
            <th>
                Row Count
            </th>
            <th>
                Items
            </th>
            <th>
                Is Required
            </th>
            <th>
                Is Auto Filled
            </th>
            <th>
                Auto Filled Order
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<script id="attributesTemplate" type="text/x-jquery-tmpl">
    {{tmpl($data.DocClassAttributeFields, {count:$data.AttributeCount}) "#attributeTemplate"}}
</script>
<script id="attributeTemplate" type="text/x-jquery-tmpl">
    <tr class="ui-widget-content {{if $item.count%2==0}}alt{{/if}}">
        <td align="center"><input type="checkbox" name="IsDefault" class="textbox DefaultAttributeField" {{if IsDefault}} checked="checked" {{/if}} /></td>
        <td align="center"><select name="DisplayOrder" class="ui-widget-content dropDownList">{{for $item.count}} <option {{if $i==DisplayOrder}}selected{{/if}} >${$i}</option>{{/for}}</select></td>
        <td><input type="text" name="LabelText" class="textbox" value="${LabelText}" class="textbox" /></td>
        
        <td align="center" style="white-space:nowrap;">${DocAttributeFieldType} <a href="#" class="EditAttributeItems">Edit</a><br/>
            {{if DocAttributeFieldType == "DropDownList"}} {{/if}}
            {{if AttributeItems.length}}<select name="Items" class="ui-widget-content...

JavaScript

$.extend(jQuery.tmpl.tag, {
    'for': {
        open: "for(var $i = 1; $i <= $1; $i++) {",
        close: "}"
    }
});

$("a.DeleteItem").live("click", function(e) {
    e.preventDefault();
    var $chk = $(this).next(":checkbox");
    if ($chk.is(":checked")) {
        $chk.removeAttr("checked");
    }
    else {
        $chk.attr("checked", "checked");
    }
});

$("a.EditAttributeItems").live("click", function(e) {
    e.preventDefault();
    result = jQuery.parseJSON($("#TextBox1").val());
    //alert(result.DocClassAttributeFields[0].AttributeItems.length);
    $("#itemsEditTemplate").tmpl(result.DocClassAttributeFields[0].AttributeItems, {
        itemCount: result.DocClassAttributeFields[0].AttributeItems.length
    }).appendTo("#AttributeItems tbody");
    $("#dialogDocAttributeItems").dialog({
        modal: true
    });
});

$("#addAttribute").click(function(e) {
    e.preventDefault();
    var attrCount = $("tr").length;
    var newAttribute = {
        Id: 0,
        IsDefault: false,
        DisplayOrder: attrCount,
        LabelText: "",
        RowCount: 1,
        AttributeItems: [],
        IsRequired: false,
        IsAutoFilled: false,
        AutoOrder: 0,
        DocAttributeFieldType: "TextBox"
    };

    $("#attributeTemplate").tmpl(newAttribute, {
        count: attrCount
    }).appendTo("tbody");
});

var data = {
    "DocClass": {
        "Id": 1,
        "Name": "TPR - Shift",
        "Description": "Total Performance Reports (TPR) - Shift.",
        "DocRetentionActionId": 1,
        "DocClosureActionId": 2,
        "RetentionPeriodInDays": 0,
        "OpenPeriodInHours": 6,
        "DefaultAttributeFieldId": 1,
        "DeletedDate": "\/Date(-62135575200000)\/",
        "DocRetentionAction": "Delete",
        "DocClosureAction": "Fixed",
        "DefaultAttributeField": "Unit On-Line Status:"
    },
    "AttributeCount": 7,
    "DocClassAttributeFields": [{
        "Id": 1,
        "IsDefault": true,
        "DisplayOrder": 1,
    ...