創建一個HTML表

Question

此腳本生成一個內含4 HTML表格4個jQuery UI的標籤，

如何合併這些表，使其在一個表中，附截圖決賽桌。

var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"John\",\"id\":51},{\"name\":\"John\",\"id\":57},{\"name\":\"John\",\"id\":98}]}"); 

const setTables = new Set(); 
$.each(data.user, function(key, value) { 
let table; 
var row = $("<tr/>"); 

if ($('table#main_table_' + value.id).length) 
    table = $("#main_table_" + value.id); 
else 
    table = $('<table class="table table-responsive table-hover table-bordered"></table>'); 
    table.attr('id', 'main_table_' + value.id); 

row.append($("<td/>").text(value.name)); 
row.append($("<td/>").text(value.id)); 

table.append(row); 

if(!setTables.has(value.id)) { 
    table.append($("<thead><tr><th>NAME</th><th>ID</th></tr></thead>")); 
    setTables.add(value.id); 
    $("#ul-tabs").append("<li><a href=\"#tabs-"+ value.id +"\">"+value.name+"</a></li>"); 
    $("#tabs").append("<div id=\"tabs-"+value.id+"\">"+table.prop('outerHTML')+"</div>"); 
} 
}); 

$("#tabs").tabs(); 

View fiddle。

Answer 1

我重構你的代碼來實現這一點。

var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"John\",\"id\":51},{\"name\":\"John\",\"id\":57},{\"name\":\"John\",\"id\":98},{\"name\":\"XYZ\",\"id\":1},{\"name\":\"XYZ\",\"id\":50},{\"name\":\"XYZ\",\"id\":45},{\"name\":\"XYZ\",\"id\":98}]}"); 
 

 
let names = data.user.map(i => i.name) 
 
    .filter((el, i, a) => a.indexOf(el) == i); 
 
    
 
function idsForName(name, array) { 
 
\t return array.filter(el => el.name === name).map(el => el.id); 
 
} 
 

 
let $table = $('<table class="table table-responsive table-hover table-bordered"></table>'); 
 

 
$table.attr('id', 'main_table'); 
 

 
let $thead = $("<thead/>"); 
 
let $tbody = $("<tbody/>"); 
 
let $hRow = $("<tr/>").addClass('head-row'); 
 

 
if(names.length) $hRow.append($("<th/>").text('NAME')); 
 

 
names.forEach(el => { 
 
\t let $row = $("<tr/>"); 
 
    $row.append($("<td/>").text(el)); 
 
    let ids = idsForName(el, data.user); 
 
    ids.forEach((id, index) => { 
 
    \t let th = '.th-' + index; 
 
\t \t if(!$hRow.find(th).length) $hRow.append($("<th/>").addClass('th-' + index).text('ID')); 
 
\t \t $row.append($("<td/>").text(id)); 
 
\t }); 
 
\t $tbody.append($row); 
 
}); 
 
$thead.append($hRow); 
 

 
$table.append($thead).append($tbody); 
 
$('#tabs').append($table.prop('outerHTML'))

body{ 
 
    margin: 20px; 
 
    } 
 
    th { 
 
    text-align: center; 
 
    } 
 
    td { 
 
    text-align: center; 
 
    } 
 
    table { 
 
    border-collapse: separate; 
 
    } 
 
    .table-responsive { 
 
    width: 100%; 
 
    } 
 
    div#export_excel { 
 
     float: right; 
 
     padding-right: 20px; 
 
     padding-top: 4px; 
 
    } 
 
    button#btnExport { 
 
     text-transform: uppercase; 
 
     font-weight: 100; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tabs"> 
 

 
</div>