JavaScript根据数组对象打印信息

Azer -

已于 2023-12-18 16:30:59 修改

阅读量447

点赞数 7

文章标签： javascript 开发语言 ecmascript

于 2023-12-18 16:30:57 首次发布

本文链接：https://blog.csdn.net/bck_xue_C_ing/article/details/135065899

版权

效果图：

核心代码：


        <script>

            let students = [

            { name: '小明', age: 18, gender: '男', hometown: '河北省' },

            { name: '小红', age: 19, gender: '女', hometown: '河南省' },

            { name: '小刚', age: 17, gender: '男', hometown: '山西省' },

            { name: '小丽', age: 18, gender: '女', hometown: '山东省' }

          ]

          for(let i =0 ; i<students.length;i++){

            document.write(`<tr>

                <td>${i+1}</td>

                <td>${students[i].name}</td>

                <td>${students[i].age}</td>

                <td>${students[i].gender}</td>

                <td>${students[i].hometown}</td>

            </tr>`)

          }

        </script>

源码：


<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        table {

            width: 600px;

            text-align: center;

        }

        table,

        th,

        td {

            border: 1px solid #ccc;

            border-collapse: collapse;

        }



        caption {

            font-size: 18px;

            margin-bottom: 10px;

            font-weight: 700;

        }



        tr {

            height: 40px;

            cursor: pointer;

        }



        table tr:nth-child(1) {

            background-color: #ddd;

        }



        table tr:not(:first-child):hover {

            background-color: #eee;

        }

    </style>

</head>



<body>

    <h2>学生信息</h2>



    <table>

        <caption>学生列表</caption>

        <tr>

            <th>序号</th>

            <th>姓名</th>

            <th>年龄</th>

            <th>性别</th>

            <th>家乡</th>

        </tr>



        <script>

            let students = [

            { name: '小明', age: 18, gender: '男', hometown: '河北省' },

            { name: '小红', age: 19, gender: '女', hometown: '河南省' },

            { name: '小刚', age: 17, gender: '男', hometown: '山西省' },

            { name: '小丽', age: 18, gender: '女', hometown: '山东省' }

          ]

          for(let i =0 ; i<students.length;i++){

            document.write(`<tr>

                <td>${i+1}</td>

                <td>${students[i].name}</td>

                <td>${students[i].age}</td>

                <td>${students[i].gender}</td>

                <td>${students[i].hometown}</td>

            </tr>`)

          }

        </script>

       

    </table>



</body>



</html>