12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <table border="1" width="800" class="stu">
- <caption>学生成绩表</caption>
- <thead>
- <tr>
- <th>学号</th>
- <th>姓名</th>
- <th>性别</th>
- <th>年龄</th>
- <th>成绩</th>
- <th>住址</th>
- </tr>
- </thead>
- </table>
- </body>
- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
- <script>
- // 3、复杂表示法(对象+数组)
- var students = [
- {
- id: '123456',
- name: '孙悟空',
- sex: '男',
- age: 18,
- score: [98, 90, 100, 99, 96, 97],
- addr: '中国花果山'
- },
- {
- id: '234567',
- name: '白骨精',
- sex: '女',
- age: 19,
- score: [88, 90, 80, 99, 92, 98],
- addr: '荒山野岭'
- },
- {
- id: '345678',
- name: '猪八戒',
- sex: '男',
- age: 28,
- score: [98, 90, 100, 99, 96, 97],
- addr: '福临山云栈洞'
- }
- ];
- for(var i in students){
- console.log(students[i])
- var data = '<tr><td>'+students[i].id+'</td><td>'+students[i].name+
- '</td><td>'+students[i].sex+'</td><td>'+students[i].age+
- '</td><td>'+students[i].score.join(' ')+'</td><td>'+students[i].addr+'</td></tr>'
- $('.stu').prepend(data)
- }
- </script>
- </html>
|