07-3.JSON表示方式-复杂表示法(对象+数组).html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. </head>
  9. <body>
  10. <table border="1" width="800" class="stu">
  11. <caption>学生成绩表</caption>
  12. <thead>
  13. <tr>
  14. <th>学号</th>
  15. <th>姓名</th>
  16. <th>性别</th>
  17. <th>年龄</th>
  18. <th>成绩</th>
  19. <th>住址</th>
  20. </tr>
  21. </thead>
  22. </table>
  23. </body>
  24. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  25. <script>
  26. // 3、复杂表示法(对象+数组)
  27. var students = [
  28. {
  29. id: '123456',
  30. name: '孙悟空',
  31. sex: '男',
  32. age: 18,
  33. score: [98, 90, 100, 99, 96, 97],
  34. addr: '中国花果山'
  35. },
  36. {
  37. id: '234567',
  38. name: '白骨精',
  39. sex: '女',
  40. age: 19,
  41. score: [88, 90, 80, 99, 92, 98],
  42. addr: '荒山野岭'
  43. },
  44. {
  45. id: '345678',
  46. name: '猪八戒',
  47. sex: '男',
  48. age: 28,
  49. score: [98, 90, 100, 99, 96, 97],
  50. addr: '福临山云栈洞'
  51. }
  52. ];
  53. for(var i in students){
  54. console.log(students[i])
  55. var data = '<tr><td>'+students[i].id+'</td><td>'+students[i].name+
  56. '</td><td>'+students[i].sex+'</td><td>'+students[i].age+
  57. '</td><td>'+students[i].score.join(' ')+'</td><td>'+students[i].addr+'</td></tr>'
  58. $('.stu').prepend(data)
  59. }
  60. </script>
  61. </html>