JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<h1>Test</h1>
<textarea>    {
              "uuid": "c9e14966-9fd4-4c61-bb72-ac6b6423a20d",
              "id": null,
              "externalId": "c9e14966-9fd4-4c61-bb72-ac6b6423a20d",
              "metaData": {},
              "timestamp": null,
              "name": "addresslist",
              "inputs": [],
              "outputs": [],
              "vClass": "de.dfki.export.business.process.entity.AddressDetail",
              "seq": 100,
              "processed": false,
              "label": null,
              "validator": {
                  "value": null
              },
              "control": "TABLE",
              "mandatory": false,
              "infotext": "",
              "labels": ["Stadt", "Strasse", "PLZ"],
              "labelOutputMapping": {
                  "Strasse": ["Stuhlsatzenhausweg 3", "Stuhlsatzenhausweg 5", "Stuhlsatzenhausweg 9", " "],
                  "Stadt": ["SB", "SB-A", "SB-B", ""],
                  "PLZ": ["66123", "66623", "66143", ""]
              }
          }
</textarea>
<br/>
<button id=build>Build</button>
<div></div>
<hr>
<button id=get>Get</button>
<pre>
</pre>

CSS

textarea {
    height:200px;
    width:100%;
}
.tableform-headline {
    font-weight:bold;
}
.tableform-label-PLZ {
    text-align:right;
}
.tableform-input-PLZ {
    width:50px;
    text-align:right;
}

JavaScript

buildTableForm = function (target, data) {
     var table = $("<table>").data("full", data);
     table.append($("<thead>")).append($("<tr>").addClass("tableform-headline"));

     for (var k in data.labels) {
         table.find(".tableform-headline").append($("<td>").addClass("tableform-label-" + data.labels[k]).text(data.labels[k]));
     }
     $("<td>").appendTo(table.find(".tableform-headline"));

     try {
         var rowNumber = data.labelOutputMapping[data.labels[0]].length;
     } catch (e) {
         rowNumber = 0;
         alert(0);
     }
     for (var r = 0; r < rowNumber; r++) {
         var newRow = $("<tr>").addClass("tableform-input-row");
         for (var k in data.labels) {
             ($("<td>").append($("<input>").data("label", data.labels[k]).addClass("tableform-input-cell tableform-input-" + data.labels[k]).val(data.labelOutputMapping[data.labels[k]][r]))).appendTo(newRow);
         }
         $("<td>").addClass("tableform-action-row-delete").html('<i class="fa fa-trash-o fa-1x off"></i>').appendTo(newRow);
         table.append(newRow);
     }
     $("<tr>").addClass("tableform-last-row").append($("<td>").attr("colspan",data.labels.length+1).addClass("tableform-action-row-addnew").html('<i class="fa fa-plus-square fa-1x off"></i>')).appendTo(table);

     target.html("").append(table);
 }


 getTableForm = function (source) {
     source = source.find("table").first();
     var inputlines = source.find("tr.tableform-input-row");
     var lom = {};

     var i = 0;
     inputlines.each(function () {

         $(this).find(".tableform-input-cell").each(function () {
             //alert($(this).data("label"));
             if (lom[$(this).data("label")]) {
                 lom[$(this).data("label")].push($(this).val());
             } else {
                 lom[$(this).data("label")] = [$(this).val()];
             }
         });

     });

     return {
         labels: source.data("full").labels,
         labelOutputMapping: lom,
   ...