|
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>DOM练习</title>
- </head>
- <body>
- <!-- 练习:要求:
- 1. 数据是保存在数组中的
- 2. DOM操作将数据渲染到表格中
- 3. 使用模板字符串的方式 -->
-
- <div id="d1"> </div>
- <button type="button" onclick="show_msg()">显示信息</button>
-
- <script type="text/javascript">
- function show_msg() {
- //1、创造数据
- // 性别: 男1, 女0
- var users = [{
- uname: "zhangsan",
- email: "zhang@163.com",
- phone: "12312123746",
- username: "张三",
- sex: 1
- },
- {
- uname: "lisi",
- email: "li@163.com",
- phone: "12312123746",
- username: "李四",
- sex: 2
- },
- {
- uname: "fangfang",
- email: "fang@163.com",
- phone: "12312123746",
- username: "芳芳",
- sex: 0
- },
- {
- uname: "lilei",
- email: "li@163.com",
- phone: "12312123746",
- username: "李雷",
- sex: 1
- },
- {
- uname: "hanmeimei",
- email: "han@163.com",
- phone: "12312123746",
- username: "韩梅梅",
- sex: 0
- }
- ];
-
- // 2、DOM操作将数据渲染到表格中
- // 创建模板字符串1
- var strHTML =
- `
- <table border="1">
- <tr>
- <th>用户名</th>
- <th>邮箱</th>
- <th>联系方式</th>
- <th>姓名</th>
- <th>性别</th>
- <th>操作</th>
- </tr>
- `;
-
-
- //创建模板字符串2 插入数据内容
- for (var i = 0; i < users.length; i++) {
- var sex = "男";
- if (users[i].sex == "1") {
- sex = "男";
- } else if (users[i].sex == "0") {
- sex = "女";
- } else {
- sex = "保密";
- }
-
- strHTML +=
- `
- <tr>
- <td>${users[i].uname}</td>
- <td>${users[i].email}</td>
- <td>${users[i].phone}</td>
- <td>${users[i].username}</td>
- <td>${sex}</td>
- <td>
- <a href="#">修改</a>
- <a href="#">删除</a>
- </td>
- </tr>
- `
- }
-
- //创建模板字符串3 结尾
- strHTML += `</table>`;
-
- // 3、将表格中的数据添加到div的innerHtml中
- d1.innerHTML = strHTML;
- }
- </script>
-
- </body>
- </html>
|