<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> table td{ 100px; height: 15px; } </style> </head> <body> <table id="mm" border="1" > <tbody id="tbody"></tbody> </table> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> var data = { "list": [{ "list": [{ "list": "111", "value": "2" }], "value": "1" }, { "list": [{ "list": "222", "value": "3" }], "value": "4" }] } var trStr = ""; $.each(data, function (tmp, tb) { $.each($(this), function (i, n) { trStr += '<tr height="25px" class="example">';//拼接处规范的表格形式 trStr += '<td colspan="2" width="10%" align="center">' + n.value + '</td>'; trStr += '<td colspan="2" width="10%" align="center"></td>'; trStr += '</tr>'; $.each(n.list, function (i1, n1) { console.log(n1) trStr += '<tr height="25px" class="example">';//拼接处规范的表格形式 trStr += '<td colspan="2" width="10%" align="center"></td>'; trStr += '<td colspan="2" width="10%" align="center">' + n1.value + '</td>'; trStr += '</tr>'; }) }) }) $("#tbody").html(trStr); </script> </body> </html>
效果图如下: