JSFiddle - React, Tailwind, and code Playground
HTML
<div id="output"></div>
CSS
table {
border-collapse:collapse;
border:1px solid black;
margin-bottom:5px;
}
table td, table th {
border:1px solid black;
padding:4px;
text-align:center;
}
JavaScript
var gAssessorsArray = [];
gAssessorsArray[0] = {
ID: 0,
Name: 'Robert',
Time: '12:00'
};
gAssessorsArray[1] = {
ID: 1,
Name: 'Chocolate',
Time: '9:00;4:35'
};
gAssessorsArray[2] = {
ID: 2,
Name: 'Hot Chocolate',
Time: '3:00;4:35;5:30'
};
var table = "";
var checkboxes = "";
for (var i = 0; i < gAssessorsArray.length; i++) {
var times = gAssessorsArray[i].Time.split(';');
if (times.length < 3) {
times[0] = times[1] == undefined ? '<td colspan="2"><input type="checkbox"/>' + times[0] + '</td>' : '<td><input type="checkbox"/>' + times[0] + '</td>'
times[1] = times[1] == undefined ? '' : '<td><input type="checkbox"/>' + times[1] + '</td>';
checkboxes = (times[1] != undefined && times[1].length > 1) ? '<input type="checkbox" />' : '';
table = '<table><thead><tr><th colspan="2">' + gAssessorsArray[i].Name + '</th></tr></thead><tbody>';
table += '<tr id="' + gAssessorsArray[i].ID + '">' + times[0] + times[1] + '</tr></tbody></table>';
} else {
if (times.length % 2 == 0) {
for (var j = 0; j < times.length; j++) {
times[j] = j % 2 == 0 ? '<tr><td><input type="checkbox"/>' + times[j] + '</td>' : '<td><input type="checkbox"/>' + times[j] + '</td></tr>';
}
} else {
for (var j = 0; j < times.length; j++) {
if (j == times.length - 1) {
times[times.length - 1] = '<tr><td colspan="2"><input type="checkbox"/>' + times[times.length - 1] + '</td></tr>';
continue;
}
times[j] = (j % 2 == 0) ? ('<tr><td><input type="checkbox"/>' + times[j] + '</td>') : ('<td><input type="checkbox"/>' + times[j] + '</td></tr>');
}
}
table = '<table><thead><tr><th colspan="2">' + gAssessorsArray[i].Name + '</th></tr></thead><tbody>' + times.join("") + '</tbody></table>';
}
document.querySelector('#output').innerHTML...