写代码,表格最后一行会自动给每门科目计算平均分,平均分和该门科目同一列,单元格显示 “平均分:XX”
时间: 2024-01-11 10:02:19 浏览: 61
好的,可以使用以下代码实现:
```html
<table>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>90</td>
<td>80</td>
<td>85</td>
</tr>
<tr>
<td>李四</td>
<td>85</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>王五</td>
<td>95</td>
<td>85</td>
<td>80</td>
</tr>
<tr class="average">
<td>平均分</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
```
```css
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
tr.average td {
font-weight: bold;
}
tr.average td:not(:first-child) {
background-color: #f2f2f2;
}
```
在这个例子中,我们新增了一个 `tr.average` 行来显示各门科目的平均分。我们使用了 CSS 的 `font-weight` 属性来加粗平均分所在行的文本,使用 `background-color` 属性来设置平均分所在列的背景色。
接下来,我们可以使用 JavaScript 来计算平均分并显示在表格中。代码如下:
```js
const table = document.querySelector('table');
const rows = table.rows;
// 计算每列的平均分
for (let i = 1; i < rows[0].cells.length; i++) {
let sum = 0;
let count = 0;
for (let j = 0; j < rows.length - 1; j++) {
const cell = rows[j].cells[i];
if (cell.innerText !== '') {
sum += parseInt(cell.innerText);
count++;
}
}
const average = count > 0 ? sum / count : 0;
rows[rows.length - 1].cells[i].innerText = `平均分:${average.toFixed(2)}`;
}
```
在这个代码中,我们首先获取表格及其行列信息。接着,我们循环遍历每列的单元格,计算该列的平均分,并将结果显示在最后一行的对应单元格中。这里使用了 JavaScript 的 `parseInt` 和 `toFixed` 方法来处理数字类型的数据。
阅读全文