模板元素

2017-07-03 17:32:00
admin
原创
456
<!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>
  • QQ讨论群
  • 关注微信
    • 欢迎咨询
    • 欢迎加入QQ群 16506021
  • 公众号:源宝网络