html页面,实现表格表格的标题有选课名称,选课老师,加入人数,加入按钮,加入人数最多20,按钮点一下加入人数加一,到20后按钮不能点击
时间: 2024-03-01 09:55:35 浏览: 22
好的,下面是一个简单的 HTML 页面,包含一个表格,其中包含选课名称、选课老师、加入人数和加入按钮列。加入按钮的点击事件会使加入人数加一,当加入人数达到 20 时,按钮将被禁用。
```
<!DOCTYPE html>
<html>
<head>
<title>课程选修表</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 10px;
}
button:disabled {
background-color: gray;
color: white;
cursor: not-allowed;
}
</style>
</head>
<body>
<h1>课程选修表</h1>
<table>
<thead>
<tr>
<th>选课名称</th>
<th>选课老师</th>
<th>加入人数</th>
<th>加入按钮</th>
</tr>
</thead>
<tbody>
<tr>
<td>数学</td>
<td>李老师</td>
<td id="math-count">0</td>
<td><button onclick="addCount('math-count')">加入</button></td>
</tr>
<tr>
<td>英语</td>
<td>张老师</td>
<td id="eng-count">0</td>
<td><button onclick="addCount('eng-count')">加入</button></td>
</tr>
<tr>
<td>物理</td>
<td>王老师</td>
<td id="phy-count">0</td>
<td><button onclick="addCount('phy-count')">加入</button></td>
</tr>
</tbody>
</table>
<script>
function addCount(id) {
var count = document.getElementById(id);
var num = parseInt(count.innerHTML);
if (num < 20) {
count.innerHTML = num + 1;
}
if (num >= 19) {
document.querySelector('#' + id + ' button').disabled = true;
}
}
</script>
</body>
</html>
```
这段代码中,我们使用 HTML 表格(`<table>`)元素来创建表格。表格的标题使用表格头(`<thead>`)元素来定义,表格的内容使用表格体(`<tbody>`)元素来定义。在表格体中,我们定义了三行数据,每行数据包括选课名称、选课老师、加入人数和加入按钮四列。在加入按钮列中,我们使用一个 JavaScript 函数 `addCount` 来处理按钮的点击事件。这个函数会获取对应行的加入人数元素,并将其加一,同时检查加入人数是否达到 20,如果达到则禁用加入按钮。在样式表中,我们定义了表格和按钮的样式,以及禁用按钮的样式。