好的，您需要一个网页，其中包含登录表单、添加
数据表单和显示
数据表格。首先，您需要使用 HTML 和 CSS 创建一个网页布局。然后，使用 JavaScript 编写代码来实现表单的功能和
数据显示。以下是一个简单的示例代码：
HTML 代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>表单示例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>登录</h1>
<
form id="login-
form">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password" required>
<input type="submit" value="登录">
</
form>
<h1>添加
数据</h1>
<
form id="add-data-
form">
<label for="name">名称：</label>
<input type="text" id="name" name="name" required>
<label for="age">年龄：</label>
<input type="number" id="age" name="age" required>
<input type="submit" value="添加">
</
form>
<h1>
数据表格</h1>
<table id="data-table">
<thead>
<tr>
<th>名称</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<!--
数据将通过 JavaScript 动态添加到此处 -->
</tbody>
</table>
</div>
<script src="script.
js"></script>
</body>
</html>
```
CSS 代码：
```css
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
margin-top: 40px;
margin-bottom: 20px;
}
form {
margin-bottom: 40px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="password"],
input[type="number"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
table {
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
```
JavaScript 代码：
```
js
const login
Form = document.getElementById('login-
form');
const addData
Form = document.getElementById('add-data-
form');
const dataTable = document.getElementById('data-table').getElementsByTagName('tbody')[0];
//
模拟登录验证
login
Form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止
表单提交
const username = event.target.elements.username.value;
const password = event.target.elements.password.value;
if (username === 'admin' && password === 'password') {
alert('登录成功！');
} else {
alert('用户名或密码错误！');
}
});
// 添加
数据
addData
Form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止
表单提交
const name = event.target.elements.name.value;
const age = event.target.elements.age.value;
const row = dataTable.insertRow();
row.insertCell().appendChild(document.createTextNode(name));
row.insertCell().appendChild(document.createTextNode(age));
});
// 动态添加示例
数据
const data = [
{name: '张三', age: 20},
{name: '李四', age: 25},
{name: '王五', age: 30},
];
for (let i = 0; i < data.length; i++) {
const row = dataTable.insertRow();
row.insertCell().appendChild(document.createTextNode(data[i].name));
row.insertCell().appendChild(document.createTextNode(data[i].age));
}
```
这个示例代码实现了一个简单的表单和
数据表格功能。当用户提交登录表单时，会进行简单的用户名和密码验证。当用户提交添加
数据表单时，会将
数据动态添加到
数据表格中。您可以根据自己的需求修改和扩展这个示例代码。
3191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
