js将json自动转html表格实例

最新推荐文章于 2024-09-19 17:31:29 发布

阿杜_ardo

最新推荐文章于 2024-09-19 17:31:29 发布

阅读量1.1w

点赞数 2

分类专栏：前端web 前端全栈文章标签： json

本文链接：https://blog.csdn.net/ardo_pass/article/details/78585984

版权

前端web 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

前端全栈

12 篇文章 2 订阅

订阅专栏

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

截图如下：

html代码：

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