jQueryday09(代码段snippets 动态插入个表格)

本文提供了一个包含HTML和jQuery的代码示例，展示了如何使用jQuery加载页面元素，并通过JavaScript动态填充表格数据。

${1:} tab 停留的位置
tabTrigger 内部输入触发源
需要保存在snippet新建的时候对应的路径下
border-spacing tb和tb的距离
border-collapse tb和table 间的距离

jQuery的$需要转义 \$
不转译 没效果返回空

<snippet>
    <content><![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        jQuery(document).ready(function(\$) {
                ${1:}
            });                     
    </script>
</head>
<body>
    <button onclick="aa()">e</button>
    <input type="text" id="2" />
</body>
</html>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>abc</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

    <style type="text/css">
        *{padding: 0;margin:0;}
        table{
            /* 边框折叠 */
            border-collapse: collapse; 
            border-spacing: 0;
            border: 1px solid #c0c0c0;

        }
        th,td{
            border:1px solid #d0d0d0;
            color:pink;
            padding: 10px;
        }
        th{
            background-color: blue;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        td{
            font:14px "微软雅黑";
        }
    </style>
    <script>
        var date1=[
        {
            name:"2",
            url:"1.html",
            type:"ee",
        },{
            name:"3",
            url:"1.html",
            type:"cc",
        },{
            name:"4",
            url:"1.html",
            type:"bb",
        }
        ];

        jQuery(document).ready(function($) {
                //动态创建数据到tbody里面    
                var str = "";
                for ( var i = 0; i < date1.length; i++) {
                    var temp = date1[i];
                    //一种方式 拼接html
                    str += "<tr>";
                    str +=      "<td>" + temp.name + "</td>";
                    str +=      "<td>" + temp.url + "</td>";
                    str +=      "<td>" + temp.type + "</td>";
                    str += "</tr>";
                }
                //把拼接好的html标签放到tbody中
                $("#2").html(str);
            });                     
        </script>
    </head>
<body>
    <table>
        <thead>
            <tr>
                <th>标题</th>
                <th>连接</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody id="2"></tbody>
    </table>
</body>