JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div id='table'></div>
<div class='table'></div>
<div class='table'></div>

CSS

table{
    margin: 5px;
    border: 2px solid #333;
}

td{
    border: 1px solid #ccc;
}

JavaScript

/**
 * Erzeugt eine Tabellenstruktur.
 */
function createTable(data, selector){
	var x, y, html = '', jNode = $(selector);
    
    // Parameter und die Anzahl der gefunden Elemente prüfen
    if(!jNode.length) return false;
    
    // Tabelle erstellen
    if(!(data instanceof Array)) return false;
	for(x=0; x<data.length; x++){
        if(!(data[x] instanceof Array)) continue;
		html += '<tr>';
		for(y=0; y<data[x].length; y++){
            if(typeof data[x][y] === 'object') continue;
			html += '<td>' + data[x][y] + '</td>';
		}
		html += '</tr>';
	}
	html = '<table><tbody>' + html + '</tbody></table>';
    
    // HTML an das/die Element/e anhängen und Rückmeldung geben
	jNode.append(html);
    return true;
}

/**
 * Demo
 */
/** Daten erzeugen */
data = [
    [1, 2, 3],
    'foobar', // wird ignoriert
    [4, 5, 6],
    {foo: 'bar'}, // wird ignoriert
    [7, 8, 9]
];

/** Tabellenstrukturen erzeugen */
createTable(data, '#table'); // erzeugt eine Tabelle
createTable(data, '.table'); // erzeugt zwei Tabellen