模板元素

2017-07-03 17:32:00
admin
原创
320
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            table {width: 100%;}
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Color</th>
                    <th>Sex</th>
                    <th>Legs<th>
                </tr>
            </thead>
        <tbody>
            <template id="row">
            <tr><td></td><td></td><td></td><td></td></tr>
            </template>
        </tbody>
        </table>
        <script>
            var data = [
               { name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
               { name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
            ];
            var template = document.querySelector('#row');
            for (var i = 0; i < data.length; i += 1) {
                var cat = data[i];
                var clone = template.content.cloneNode(true);
                var cells = clone.querySelectorAll('td');
                cells[0].textContent = cat.name;
                cells[1].textContent = cat.color;
                cells[2].textContent = cat.sex;
                cells[3].textContent = cat.legs;
                template.parentNode.appendChild(clone);
            }
        </script>
    </body>
</html>
文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227