添加一个页面,html+js实现下拉框、按钮、表格(固定表头)
以下是一个简单的HTML页面示例,包含了下拉框、按钮和固定表头的表格:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
thead th {
background-color: #f2f2f2;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<select id="mySelect">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<button onclick="myFunction()">Click Me!</button>
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<!-- Add more rows as needed -->
</tbody>
</table>
<script>
function myFunction() {
alert('Button clicked!');
}
</script>
</body>
</html>
这个页面包含了一个下拉框、一个按钮和一个表格。表格的头部是固定的,这意味着当滚动表格的主体部分时,表头将保持在视图中。按钮点击时会弹出一个警告框。这个示例提供了一个简单的起点,您可以根据需要添加更多的下拉选项、表格行或自定义JavaScript功能。
评论已关闭