machinecat520
/
zj-Exercise


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
							<!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>
    <h2>员工信息</h2>
    <table border="1" width="400" class="employee">
        <tr>
            <th>员工编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>家庭住址</th>
        </tr>
    </table>
    <ul class="score">

    </ul>
    <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>
    // 单值
    var productName = '牙膏';
    var price = 2.5;

    // 1、对象表示
    var obj = {
        id: '123456',
        name: '孙悟空',
        sex: '男',
        age: 18,
        addr: '中国花果山'
    };
    // console.log(obj);
    var str = '<tr><td>' + obj.id + '</td><td>' + obj.name +
        '</td><td>' + obj.sex + '</td><td>' + obj.age +
        '</td><td>' + obj.addr + '</td></tr>';
    $('.employee').append(str);

    // 2、数组
    var score = [98, 90, 100, 99, 96, 97]
    score.forEach(function (value, index) {
        console.log(value)
        $('.score').append('<li>' + value + '</li>')
    })

    // 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>