js将json自动转html表格实例

json

适用于现代 C++ 的 JSON。

项目地址：https://gitcode.com/gh_mirrors/js/json

免费下载资源

阿杜_ardo

11742人浏览 · 2017-11-20 20:04:27

阿杜_ardo · 2017-11-20 20:04:27 发布

Js自动将json格式转成html table形式展现，做下笔记

截图如下：

html代码：

json

适用于现代 C++ 的 JSON。

项目地址：https://gitcode.com/gh_mirrors/js/json

<html> 
<head> 
<title></title> 
<script type="text/javascript">      
          var jsonArray = [{"编号":"1001","名称":"k-means","描述":"K-means算法是硬聚类算法，是典型的基于原型的目标函数聚类方法的代表","操作":"<button>编辑</button>"},{"编号":"1002","名称":"restful","描述":"一种软件架构风格、设计风格，而不是标准，只是提供了一组设计原则和约束条件","操作":"<button>删除</button>"}]; 
          var headArray = []; 
          function parseHead(oneRow) { 
                        for ( var i in oneRow) { 
                                headArray[headArray.length] = i; 
                         } 
            } 
            function appendTable() { 
                          parseHead(jsonArray[0]); 
                          var div = document.getElementById("div1");  
                          var table = document.createElement("table"); 
                          var thead = document.createElement("tr"); 
                          for ( var count = 0; count < headArray.length; count++) { 
                                    var td = document.createElement("th"); 
                                    td.innerHTML = headArray[count]; 
                                    thead.appendChild(td); 
                           } 
                           table.appendChild(thead); 
                          for ( var tableRowNo = 0; tableRowNo < jsonArray.length; tableRowNo++) { 
                                    var tr = document.createElement("tr"); 
                                    for ( var headCount = 0; headCount < headArray.length; headCount++) { 
                                            var cell = document.createElement("td"); 
                                            cell.innerHTML = jsonArray[tableRowNo][headArray[headCount]]; 
                                            tr.appendChild(cell); 
                                    } 
                                    table.appendChild(tr); 
                         } 
                          div.appendChild(table); 
        }                        
           
</script> 
    <style> 
        table { 
            width: 900px; 
            padding: 0 ; 
            margin: 20 auto; 
            border-collapse: collapse; 
        } 
        td,th { 
            border: 1px solid #ddd; 
            padding: 6px 6px 6px 12px; 
            color: #4f6b72; 
            text-align: center; 
        } 
        th { 
            background: #d3d3d3; 
             
        } 
    </style> 
</head> 
<body οnlοad="appendTable(jsonArray);"> 
         <h3 align="center">json示例代码</h3>
         <pre>
                   var jsonArray = [{"编号":"1001","名称":"k-means","描述":"K-means算法是硬聚类算法，是典型的基于原型的目标函数聚类方法的代表","操作":"<button>编辑</button>"},
                  {"编号":"1002","名称":"restful","描述":"一种软件架构风格、设计风格，而不是标准，只是提供了一组设计原则和约束条件","操作":"<button>删除</button>"}];          
         </pre>
    <div id="div1"></div> 
</body> 
</html>

阅读全文

AI总结

GitHub 加速计划 / js / json

下载

适用于现代 C++ 的 JSON。

最近提交(Master分支：6 个月前 )

2be2c83d 13 小时前

c67d5382 * :alembic: try matrix for latest Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :recycle: refactor from https://github.com/nlohmann/json/issues/4745#issuecomment-2810128420 Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :construction_worker: simplify CI Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :construction_worker: simplify CI Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :rotating_light: fix cpplint warning Signed-off-by: Niels Lohmann <mail@nlohmann.me> * :construction_worker: simplify CI Signed-off-by: Niels Lohmann <mail@nlohmann.me> --------- Signed-off-by: Niels Lohmann <mail@nlohmann.me> 5 天前