使用前端制作一个页面展示所有的人员信息,包含编号(自动生成),姓名,电话,性别(单选),爱好(多选)
时间: 2023-06-13 13:04:06 浏览: 52
可以使用HTML、CSS、JavaScript来制作这个页面。以下是一个简单的示例代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>人员信息展示</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>人员信息表</h1>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>电话</th>
<th>性别</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>12345678901</td>
<td>男</td>
<td>篮球、游泳</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>13987654321</td>
<td>女</td>
<td>音乐、阅读、旅游</td>
</tr>
<!-- 其他人员信息 -->
</tbody>
</table>
</body>
</html>
```
CSS代码:
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
margin: 20px 0;
}
table {
margin: 0 auto;
border-collapse: collapse;
width: 80%;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
th {
background-color: #f0f0f0;
}
tr:nth-child(even) td {
background-color: #f5f5f5;
}
tr:hover td {
background-color: #f2f2f2;
}
```
JavaScript代码(用于自动生成编号):
```javascript
// 获取表格中最后一行的编号并加1
function getNextId() {
var table = document.querySelector('table');
var lastRow = table.rows[table.rows.length - 1];
var lastId = parseInt(lastRow.cells[0].textContent);
return lastId + 1;
}
// 添加一行新数据
function addRow() {
var table = document.querySelector('table');
var newRow = table.insertRow(-1); // 在表格最后插入一行
var idCell = newRow.insertCell(0);
var nameCell = newRow.insertCell(1);
var phoneCell = newRow.insertCell(2);
var genderCell = newRow.insertCell(3);
var hobbyCell = newRow.insertCell(4);
idCell.textContent = getNextId(); // 自动生成编号
nameCell.innerHTML = '<input type="text" name="name">';
phoneCell.innerHTML = '<input type="text" name="phone">';
genderCell.innerHTML = '<input type="radio" name="gender" value="男">男<input type="radio" name="gender" value="女">女';
hobbyCell.innerHTML = '<input type="checkbox" name="hobby" value="篮球">篮球<input type="checkbox" name="hobby" value="游泳">游泳<input type="checkbox" name="hobby" value="音乐">音乐<input type="checkbox" name="hobby" value="阅读">阅读<input type="checkbox" name="hobby" value="旅游">旅游';
}
// 绑定“添加”按钮的点击事件
var addButton = document.querySelector('#addButton');
addButton.addEventListener('click', addRow);
```
这段JavaScript代码实现了自动生成编号和添加新数据的功能,需要在HTML中添加一个“添加”按钮:
```html
<!-- 在table之后添加一个按钮 -->
<button id="addButton">添加</button>
```