JSFiddle - React, Tailwind, and code Playground
by Optimix
HTML
<form>
<table>
</table>
</form>
CSS
table td {
border: 1px solid black;
}
JavaScript
var str = "?FirmaNavn=Testy&Telefon=41121412&Operations=@@regnr=KE5544444@@PlanlagtDato=23.09.2016@@Operasjon=Vask@@@@regnr=ZX2321312@@PlanlagtDato=19.03.2016@@Operasjon=Rengjøring@@";
var indexOper = str.indexOf('Operations=');
var tableParametres = str.substring(indexOper + 11);
console.log('tableParametres: ' + tableParametres);
var rows = tableParametres.split('@@@@');
console.log('rows: ' + rows);
var tableObject = [];
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var params = row.split('@@');
console.log('params: ' + params);
var rowObject = {};
for (var k = 0; k < params.length; k++) {
var parameterPare = params[k];
if (parameterPare != '') {
var pare = parameterPare.split('=');
console.log('pare: ' + pare);
if (pare.length == 2) {
rowObject[pare[0]] = pare[1];
console.log('pare[0]: ' + pare[0] + ' pare[1]: ' + pare[1]);
}
}
}
console.log('rowObject: ' + rowObject);
tableObject.push(rowObject);
}
console.log('tableObject: ' + tableObject);
//SHOW TABLE
var table = $('table');
//HEAD
if (tableObject.length > 0) {
var row = $('<tr></tr>');
row.append("<th></th>");
for (variable in tableObject[0]) {
row.append($('<th data-columnname="' + variable + '">' + variable + '</th>'));
}
table.append(row);
}
//table
for (var i = 0; i < tableObject.length; i++) {
var row = $('<tr class="table-row" data-rownumber="' + i + '"></tr>');
//add checkbox
var cellWithCheckbox = $('<td><input type="checkbox" data-rownumber="' + i + '"/></td>');
var checkbox = cellWithCheckbox.find('input');
checkbox.prop('checked', true);
AddChangeEvent(checkbox);
row.append(cellWithCheckbox);
//add data cells
for (variable in tableObject[i]) {
row.append($('<td data-columnname="' + variable + '">' + tableObject[i][variable] + '</td>'));
var input = $('<input class="data-input" type="hidden" name="' + variable + (i + 1).toString() + '" value="' +...