CODEWITHSUNDEEP
javascriptjqueryhtml
deepak murthy
deepak murthy

Reputation: 411

show html table inside tabs

FULL Code here: https://jsfiddle.net/zw9sy5ew/2/

this code will generate two tables based on JSON keys,.

How do i create Jquery tabs and put the first table in one tab and the other table in another tab

$.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>");
});

Upvotes: 1

Views: 2860

Answers (2)

Danilo Carrabino
Danilo Carrabino

Reputation: 397

Tables grouped by 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}]}");

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>

Upvotes: 1

Danilo Carrabino
Danilo Carrabino

Reputation: 397

I took an example from JQuery ui tabs and I modified it for your needs:

<!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>

Upvotes: 1

Related Questions