一个轻量级但功能强大的jQuery JSON到表插件，可以从您提供的JSON数组或JSON对象快速生成HTML表。

表格是以表格方式显示数据的最佳方式。通过表格，人们可以理解信息，并根据行和列快速做出决策。如果您有来自其他来源的JSON中的半结构化数据，您可以使用此插件将它们转换为HTML表。

参见：

• JavaScript中的10个最佳表导出插件
• JavaScript中的10个最佳在线JSON数据转换器

如何使用它:

1.要开始，请包括jquery.jsontotable.min.js查询在jQuery之后。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.jsontotable.min.js"></script>

2.创建一个容器来容纳从您提供的JSON数据生成的表。

<div id="example"></div>

3.将JSON数组转换为HTML表。

// define your data
var myData = [
    [1, 2, 3],
    ["one", "two", "three"]
];
 
// generate the table
$.jsontotable(myData, { 
  id: "#example", 
});

4.将JSON对象转换为HTML表。

// define your data
var myData = [
    {"Title1": "Hello", "Title2": "Fine", "Title3": "Thank you"},
    {"Title1": "안녕하세요", "Title2": "좋아요", "Title3": "감사합니다"},
    {"Title1": "こんにちは", "Title2": "ファイン", "Title3": "ありがとう"},
    {"Title1": "你好", "Title2": "精", "Title3": "谢谢"},
    {"Title1": "Bonjour", "Title2": "Beaux", "Title3": "Merci"},
    {"Title1": "Ciao", "Title2": "Bene", "Title3": "Grazie"}
];
 
// generate the table
$.jsontotable(myData, { 
  id: "#example", 
});

5.将JSON字符串转换为HTML表。

// define your data
var str = "[\
    {\"Title1\": \"Hello\", \"Title2\": \"Fine\", \"Title3\": \"Thank you\"}, \
    {\"Title1\": \"안녕하세요\", \"Title2\": \"좋아요\", \"Title3\": \"감사합니다\"}, \
    {\"Title1\": \"こんにちは\", \"Title2\": \"ファイン\", \"Title3\": \"ありがとう\"}, \
    {\"Title1\": \"你好\", \"Title2\": \"精\", \"Title3\": \"谢谢\"}, \
    {\"Title1\": \"Bonjour\", \"Title2\": \"Beaux\", \"Title3\": \"Merci\"}, \
    {\"Title1\": \"Ciao\", \"Title2\": \"Bene\", \"Title3\": \"Grazie\"} \
]";
 
// generate the table
$.jsontotable(str, { 
  id: "#example", 
});

6.确定是否显示表头。默认值：true。

$.jsontotable(str, { 
  id: "#example", 
  header: false,
});

7.将自定义CSS类添加到HTML表中。默认值：null。

$.jsontotable(str, { 
  id: "#example", 
  className: "table table-bordered table-striped",
});

预览截图

从JSON数组和对象生成表 jQuery JSONtoTable