学生成绩表 - 查看和操作学生成绩数据
<!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>学生成绩表</title>
</head>
<body>
<div style="font-size: 30px; text-align: center;" id="tb1">课程表</div>
<table width="800px" border="1" cellspacing="0" align="center">
<tr>
<th>学号</th>
<th>姓名</th>
<th>分数</th>
<th>评语</th>
</tr>
<tr align="center" class="data">
<td>001</td>
<td>张三</td>
<td>90</td>
<td>很优秀</td>
</tr>
<tr align="center" class="data">
<td>002</td>
<td>李四</td>
<td>92</td>
<td>优秀</td>
</tr>
<tr align="center" class="data">
<td>003</td>
<td>王五</td>
<td>83</td>
<td>很努力,不错</td>
</tr>
<tr align="center" class="data">
<td>004</td>
<td>赵六</td>
<td>98</td>
<td>666</td>
</tr>
</table>
<pre><code><br>
<div style="text-align: center;">
<input id="b1" type="button" value="改变标题内容" onclick="changeAll()">
<input id="b2" type="button" value="改变标题颜色" onclick="changeColor()">
<input id="b3" type="button" value="删除最后一行" onclick="deletTable()">
</div>
</code></pre>
</body>
<script>
//3. 点击 “删除最后一行” 按钮，需要将表格中的最后一行数据删除掉，删除行可以调用tr这个DOM对象的remove()方法
换一个方式内容：<script>
function deletTable() {
var table = document.getElementsByTagName("table")[0];
var rows = table.getElementsByTagName("tr");
var lastRow = rows[rows.length - 1];
table.removeChild(lastRow);
}
</script>
原文地址: https://www.cveoy.top/t/topic/qvnN 著作权归作者所有。请勿转载和采集!