【JavaScript】利用JS实现在数组内的对象遍历到页面中

Pixel0216

已于 2022-04-21 17:37:34 修改

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript CSS HTML 文章标签： javascript 前端 css3 html5

于 2022-04-19 11:22:11 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43797577/article/details/124269077

javascript 同时被 3 个专栏收录

25 篇文章

订阅专栏

CSS

12 篇文章

订阅专栏

HTML

12 篇文章

订阅专栏

这篇博客展示了如何使用CSS样式和JavaScript动态生成一个包含学生信息的表格。通过CSS设置了表格的整体样式，如居中对齐，边框等，并实现了当鼠标悬停在非首行表格行上时显示小手光标的交互效果。JS部分则通过遍历学生信息数组，动态插入表格行，展示学生的序号、姓名、年龄、性别和家乡。博客还提供了在数组中添加新元素的提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS部分代码：

<style>
  * {
    text-align: center;
    padding: 0px;
    margin: 0px;
  }

  h2 {
    margin-top: 100px;
  }

  table {
    border: 1px solid gray;
    text-align: center;
    margin-left: 35%;

  }

  th {
    background-color: #eee;
    padding: 0px 30px;
  }

  /* 除了第一行的tr，其余放上去变为小手 */
  table tr:not(:first-child):hover {
    background-color: #eee;
    cursor: pointer;

  }
</style>

JS部分代码：

  <script>
    document.write(`
      <h2>学生信息</h2>
  <table>
    <caption>学生列表</caption>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>家乡</th>
    </tr>
    `)

    let student = [
      { name: '小明', age: '18', gender: '男', hometown: '河北省' },
      { name: '小红', age: '17', gender: '女', hometown: '河南省' },
      { name: '小刚', age: '19', gender: '男', hometown: '山西省' },
      { name: '小丽', age: '18', gender: '女', hometown: '山东省' },
    ]
    for (let i = 0; i < student.length; i++) {
      //获取到数组里的元素
      document.write(`
      <tr>
    <td>${i + 1}</td>
    <td>${student[i].name}</td>
    <td>${student[i].age}</td>
    <td>${student[i].gender}</td>
    <td>${student[i].hometown}</td>
  </tr>
  `)
    }
    document.write(`</table>`)
  </script>

效果如下,可在数组中新增元素

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSAgTHVja3kgIEJveQ==,size_19,color_FFFFFF,t_70,g_se,x_16