ショーのHTMLタブ内のテーブルここ

FULLコード：このコードは、JSONのキーに基づいて2つのテーブルを生成しますhttps://jsfiddle.net/zw9sy5ew/2/ショーのHTMLタブ内のテーブルここ

、。

どのように私はjQueryのUIのタブから例を取って、私はあなたのニーズのためにそれを修正jQueryのタブを作成し、

別のタブに

$.each(data.user, function(key, value) { 
    var row = $("<tr/>"); 
    if ($('table#main_table_' + value.id).length) 
     table = $("#main_table_" + value.id); 
    else 
     table = $('<table></table>'); 
     table.attr('id', 'main_table_' + value.id); 
     row.append($("<td/>").text(value.name)); 
     row.append($("<td/>").text(value.id)); 
     table.append(row); 
     $("#list_table_json").append(table); 
     $("#list_table_json").append("<br>"); 
});

出典

2017-09-21 deepak murthy

テーブル：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>test jQuery Tabs</title> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
</head> 
<body> 

<div id="tabs"> 
    <ul id="ul-tabs"> 

    </ul> 

</div> 

<script type="text/javascript"> 
var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"Mark\",\"id\":50},{\"name\":\"Johnny\",\"id\":57}]}"); 

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></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)) { 
    setTables.add(value.id); 
    $("#ul-tabs").append("<li><a href=\"#tabs-"+ value.id +"\">"+value.id+"</a></li>"); 
    $("#tabs").append("<div id=\"tabs-"+value.id+"\">"+table.prop('outerHTML')+"</div>"); 
    } 
}); 

$("#tabs").tabs(); 
</script> 

</body> 
</html>

出典

2017-09-21 14:43:57

ありがとうございます:) 名前を追加するにはと ID？ –

こんにちは:)ただ、テーブルを作成した後、このようにそれにthead要素を追加します。table.append（$（ "名前同上"））; –

クール:)ありがとう、私は間違った行に追加していた –

を一つのタブで最初のテーブルと他のテーブルを入れてください： value.idによってグループ化された

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>test jQuery Tabs</title> 
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
</head> 
<body> 

<div id="tabs"> 
    <ul id="ul-tabs"> 

    </ul> 

</div> 

<script type="text/javascript"> 
var data = $.parseJSON("{\"version\":\"5.2\",\"user_type\":\"online\",\"user\":[{\"name\":\"John\",\"id\":50},{\"name\":\"Mark\",\"id\":50},{\"name\":\"Johnny\",\"id\":57}]}"); 

$.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></table>'); 
    table.attr('id', 'main_table_' + value.id); 

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

    table.append(row); 

    console.log(table); 

    $("#ul-tabs").append("<li><a href=\"#tabs-"+ value.name +"\">"+value.name+"</a></li>"); 
    $("#tabs").append("<div id=\"tabs-"+value.name+"\">"+table.prop('outerHTML')+"</div>"); 
}); 

$("#tabs").tabs(); 
</script> 

</body> 
</html>

出典

2017-09-21 13:51:33

ありがとうSAV私の日には、jquery UIタブの例のリンクを共有できますか？コードの出力には、3つのタブが表示されます。ここで、johnとmarkは同じデータを共有します.. 2つのタブのみを作る方法 –

JQuery UIリンクはjqueryui.com/tabsです。私はあなたがvalue.idでグループ化したいと理解していましたので、別の作業ソリューションをお送りし、あなたが好きなものを選択することができます –

ショーのHTMLタブ内のテーブルここ

答えて

関連する問題