功能需求:
- 表格行要求 编号、科目、成绩、和 删除链接
- 最后计算出总分 和 平均分
先看看效果:
JavaScript核心代码:
<!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" />
<link rel="stylesheet" href="./styles/index.css" />
<title>Document</title>
</head>
<body>
<script>
// 核心数据
const 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 id="app" class="score-case">
<div class="table">
<table>
<thead>
<tr>
<th>编号</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
${tr}
</tbody>
<tbody>
<tr>
<td colspan="5">
<span class="none">暂无数据</span>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<span>总分:${total}</span>
<span style="margin-left: 50px">平均分:${total / data.length}</span>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
`)
</script>
</body>
</html>
HTML代码:
<html>
<table>
<thead>
<tr>
<th>编号</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<!-- 下面的内容通过JavaScript渲染即可! -->
<tbody>
</tbody>
</table>
</html>
css代码样式:使用放到less文件夹里面,将style标签删除后保存自动生成css文件引入使用即可!
<style>
// less语法生成样式
.score-case {
width: 1000px;
margin: 50px auto;
display: flex;
.table {
flex: 4;
table {
width: 100%;
border-spacing: 0;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
th {
background: #f5f5f5;
}
tr:hover td {
background: #f5f5f5;
}
td,
th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
text-align: center;
padding: 10px;
&.red {
color: red;
}
}
}
.none {
height: 100px;
line-height: 100px;
color: #999;
}
}
.form {
flex: 1;
padding: 20px;
.form-item {
display: flex;
margin-bottom: 20px;
align-items: center;
}
.form-item .label {
width: 60px;
text-align: right;
font-size: 14px;
}
.form-item .input {
flex: 1;
}
.form-item input,
.form-item select {
appearance: none;
outline: none;
border: 1px solid #ccc;
width: 200px;
height: 40px;
box-sizing: border-box;
padding: 10px;
color: #666;
}
.form-item input::placeholder {
color: #666;
}
.form-item .cancel,
.form-item .submit {
appearance: none;
outline: none;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 10px;
margin-right: 10px;
font-size: 12px;
background: #ccc;
}
.form-item .submit {
border-color: #069;
background: #069;
color: #fff;
}
}
}
</style>