deepak murthy deepak murthy - 27 days ago 5
jQuery Question

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

Answer Source

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>