ejs动态创建表格（3）

最新推荐文章于 2024-04-13 09:46:31 发布

weixin_34413357

最新推荐文章于 2024-04-13 09:46:31 发布

阅读量626

点赞数

文章标签： json python javascript ViewUI

原文链接：https://my.oschina.net/lvhuizhenblog/blog/312174

版权

2019独角兽企业重金招聘Python工程师标准>>>

HTML 代码

<html>
  
<head>
    <style type = "text/CSS">
        table, td, th
        {
            border:1px solid black;
            border-collapse:collapse;
             
        }
         
        table
        {
            width:12em;
        }
         
        td
        {
            text-align:center;
        }
         
        th
        {
            background:gray;
        }
         
    </style>


    <script src="js/jquery-2.1.1.js"></script>
     <script src="js/ejs.js"></script>


    <script>
          
        var txt = '[\
        {\
             "id":1,\
             "name":"张三",\
             "age":20\
        },\
        {\
            "id":2,\
            "name":"李四",\
            "age":21\
        },\
        {\
            "id":3,\
            "name":"王五",\
            "age":22\
        }\
        ]';
          
          
    var person = JSON.parse(txt);

    function myFunction()
    {
        var html = new EJS({url:'js/tmpl/cleaning.ejs'}).render(person);
        alert(html);
        document.getElementById("div1").innerHTML = html;
        
    }
               
    </script>
</head>
  
  
<body>
      <button onclick="myFunction()">点击</button>
        <div id="div1"></div>
    
</body>
</html>

ejs模板代码

<table>
    <tr>
        <%for(var i in person[0]) {%>
            <th><%=i %></th>
        <%}%>
    </tr>

    <%for(var j= 0; j < person.length; j++) { %>
        <tr>
            <%for(var attribute in person[j]) {%>
                    <td><%= person[j][attribute] %></td>
            <%}%>
        </tr>
    <%}%>

</table>

把HTML DOM中的代码进行了改写，使用JQuery进行些上面的那个例子代码如下：

<html>
<head>
    <style type="text/css">
        table,td,th
        {
            border:1px solid #ccc;
            border-collapse:collapse;
        }

        table
        {
            width:12em;
        }
        td
        {
            text-align:center;
        }
        th
        {
            background:gray;
        }
    </style>
    <script src="js/jquery-2.1.1.js"></script>
    <script src="js/ejs.js"></script>
    <script>
    var personStr = '[\
        {\
            "id" : "1",\
            "name" :"zhangsan",\
            "age" : "21"\
        },\
        {\
            "id" : "2",\
            "name" : "lisi",\
            "age" : "22"\
        },\
        {\
            "id" : "3",\
            "name" : "wangwu",\
            "age" : "23"\
        }\
    ]';
    var persons = JSON.parse(personStr);
    
    $(function(){
        $("#btn").click(function(){
            var html = new EJS({url: 'js/tmpl/cleaning.ejs'}).render(persons);
            alert(html);
            $(this).after(html);
            
        })
    })
    
        
    </script>
</head>

<body>
    <button id="btn">点击</button>
</body>
</html>

转载于:https://my.oschina.net/lvhuizhenblog/blog/312174