search

jin781480406 / Javascript-

pink老师的js基础班的内容
0 stars 2 forks source link

求助 js 渲染成绩学生表 为啥渲染不出来 求帮忙 #1

Open Adddmini00235 opened 1 month ago

Adddmini00235 commented 1 month ago

<!DOCTYPE html>

案例
Adddmini00235 commented 1 month ago

求助

577fkj commented 1 month ago 
<title>案例</title> <style> body{ background-color: #ccc; } .box{ width: 1200px; height: 800px; background-color: #fff; margin:50px auto; border-radius:15px ; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); position: relative; }
    table,th,tr ,td{
        /* 合并相邻的边框 */
        border-collapse: collapse;
        border: 1.5px solid black;
        width: 800px;
        height: 50px;
        text-align: center;
        line-height: 50px;

    }

    table{
        position: relative;
        top: 150px;
    }

    th{
        background-color: #ccc;
    }

        td {
        overflow: hidden;
        white-space: nowrap;
          text-overflow: ellipsis;
        }

</style>
    </table>
</div>

<script>
    let data = [
        { subject:'语文',score:46},

        { subject:'英语',score:80},

        { subject:'数学',score:100}
    ]

    let tr = ''

    let total = 0 //计算总分

    for(let i = 0; i< data.length ; i++){
        tr += `<tr>
            <td>${i + 1}</td>
            <td>${data[i].subject}</td>
            <td>${data[i].score}</td>
            <td><a href="#">删除</a></td>
        </tr>`

        total += data[i].score
    }

    document.write(`
    <div class="box">
    <table align="center" class="box-b">
        <thead>
           <tr>
            <th>编号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
             ${tr}  <!-- 循环添加数据 -->
        </tbody>

        <tbody>
        <tr>
            <td colspan="5"><span>总分${total}</span> &nbsp; <span>平均分${total / data.length}</span></td>
        </tr>
        </tbody>

    </table>
</div>
    `)
</script>