html5 table append,javascript - Create table with jQuery - append - Stack Overflow

I wrote rather good function that can generate vertical and horizontal tables:

function generateTable(rowsData, titles, type, _class) {

var $table = $("

var $tbody = $("

").appendTo($table);

if (type == 2) {//vertical table

if (rowsData.length !== titles.length) {

console.error('rows and data rows count doesent match');

return false;

}

titles.forEach(function (title, index) {

var $tr = $("

");

$("

").html(title).appendTo($tr);

var rows = rowsData[index];

rows.forEach(function (html) {

$("

").html(html).appendTo($tr);

});

$tr.appendTo($tbody);

});

} else if (type == 1) {//horsantal table

var valid = true;

rowsData.forEach(function (row) {

if (!row) {

valid = false;

return;

}

if (row.length !== titles.length) {

valid = false;

return;

}

});

if (!valid) {

console.error('rows and data rows count doesent match');

return false;

}

var $tr = $("

");

titles.forEach(function (title, index) {

$("

").html(title).appendTo($tr);

});

$tr.appendTo($tbody);

rowsData.forEach(function (row, index) {

var $tr = $("

");

row.forEach(function (html) {

$("

").html(html).appendTo($tr);

});

$tr.appendTo($tbody);

});

}

return $table;

}

usage example:

var title = [

'مساحت موجود',

'مساحت باقیمانده',

'مساحت در طرح'

];

var rows = [

[number_format(data.source.area,2)],

[number_format(data.intersection.area,2)],

[number_format(data.deference.area,2)]

];

var $ft = generateTable(rows, title, 2,"table table-striped table-hover table-bordered");

$ft.appendTo( GroupAnalyse.$results );

var title = [

'جهت',

'اندازه قبلی',

'اندازه فعلی',

'وضعیت',

'میزان عقب نشینی',

];

var rows = data.edgesData.map(function (r) {

return [

r.directionText,

r.lineLength,

r.newLineLength,

r.stateText,

r.lineLengthDifference

];

});

var $et = generateTable(rows, title, 1,"table table-striped table-hover table-bordered");

$et.appendTo( GroupAnalyse.$results );

$('

---

').appendTo( GroupAnalyse.$results );

example result: