JQuery 배열 테이블 만들기 - OhMinsSup/tip-review GitHub Wiki

arrayToTable = function(data, options = {}){
	var table = $('<table />'),
	    thead,
	    tfoot,
	    rows = [],
	    row,
	    i, j,
    	defaults = {
			th: true, // should we use th elemenst for the first row
			thead: false, //should we incldue a thead element with the first row
			tfoot: false, // should we include a tfoot element with the last row
			attrs: {} // attributes for the table element, can be used to
		}

	options = $.extend(defaults, options);

	table.attr(options.attrs)

	// loop through all the rows, we will deal with tfoot and thead later
	for(i = 0; i < data.length; i++){
		row = $('<tr />');
		for(j = 0; j < data[i].length; j++){
			if(i == 0 && options.th){
				row.append($('<th />').html(data[i][j]));
			}else{
				row.append($('<td />').html(data[i][j]));
			}
		}
		rows.push(row);
	}

	// if we want a thead use shift to get it
	if(options.thead){
		thead = rows.shift();
		thead = $('<thead />').append(thead);
		table.append(thead);
	}

	// if we want a tfoot then pop it off for later use
	if(options.tfoot){
		tfoot = rows.pop();
	}

	// add all the rows
	for (i = 0; i < rows.length; i++) {
		table.append(rows[i]);
	};

	// and finally add the footer if needed
	if(options.tfoot){
		tfoot = $('<tfoot />').append(tfoot);
		table.append(tfoot);
	}
	return table;
}
	
    var data = [
		['Name', 'Age', 'Email'],
		['John Doe', '27', '[email protected]'],
		['Jane Doe', '29', '[email protected]']
	];
	
	var table = arrayToTable(data, {
		thead: true,
		attrs: {class: 'table'}
	})
	
	$('body').append(table);

            var setLanguages = function () {
                api.getLanguages().then(function (languages) {
                    $('[data-languages]').html(languages.map(function (language) {


                        return ('<label for="lang-key-' + language.idx +
                            '" class="control-label">' + language.title + '</label>' +
                            '<input type="text" class="form-control" name="langs" id="lang-key-' +
                            language.idx +
                            '" data-lang-idx="' + language.idx + '" placeholder="' +
                            language.title + ' 입력">'
                        );
                    }).join(''));
                    setLanguageValues();
                });
            }