Question

完整代码： https://jsfiddle.net/zw9sy5ew/2/

此代码将基于JSON密钥生成两个表。

如何创建 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>");
});

Answer 1

我从JQuery ui标签中提取了一个示例，并根据您的需要对其进行了修改：

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

Answer 2

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

在标签内显示html表格

2 个答案: