<!doctype
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>主页</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-dark-emphasis text-center mt-5">学生管理系统</h1>
<
form method="post" action="" class="row g-3 mt-3 d-flex justify-content-around align-items-center">
<div class="col-auto">
<label for="name" class="text-primary-emphasis">姓名</label>
</div>
<div class="col-auto">
<input type="text" class="
form-control" id="name" placeholder="请输入姓名">
</div>
<div class="col-auto">
<label for="age" class="text-primary-emphasis">年龄</label>
</div>
<div class="col-auto">
<input type="number" class="
form-control" id="age" placeholder="请输入年龄">
</div>
<div class="col-auto">
<label for="address" class="text-primary-emphasis">地址</label>
</div>
<div class="col-auto">
<input type="text" class="
form-control" id="address" placeholder="请输入地址">
</div>
<div class="col-auto">
<
button type="submit" class="btn btn-dark">保存</
button>
</div>
</
form>
<table class="mt-3 table table-light table-bordered text-center">
<thead>
<tr class="text-primary-emphasis">
<th scope="col">学号</th>
<th scope="col">姓名</th>
<th scope="col">年龄</th>
<th scope="col">地址</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>张三</td>
<td>15岁</td>
<td>江西省南昌市青山湖区北京东路58号</td>
<td>
<
button type="
button" class="btn btn-sm btn-secondary mx-3" onclick="fill
Form(this)">修改</
button>
<
button type="
button" class="btn btn-sm btn-danger">删除</
button>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>李四</td>
<td>18岁</td>
<td>江西省南昌市青山湖区北京东路59号</td>
<td>
<
button type="
button" class="btn btn-sm btn-secondary mx-3" onclick="fill
Form(this)">修改</
button>
<
button type="
button" class="btn btn-sm btn-danger">删除</
button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
let name = document.getElementById('name')
let age = document.getElementById('age')
let address = document.getElementById('address')
function fill
Form(item) {
const tr = item.parentNode.parentNode
let nodes = tr.querySelectorAll('td')
console.log(nodes)
name.value = nodes[0].innerText
age.value = parseInt(nodes[1].innerText)
address.value = nodes[2].innerText
}
</script>
</body>
</
html><!doctype
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<title>登录页</title>
<style>
form {
margin
: 200px auto;
width
: 35%;
height
: 25%;
}
div.card {
padding-left
: 50px;
padding-right
: 50px;
}
</style>
</head>
<body>
<div class="container">
<
form class="text-center">
<img class="mb-4" src="img/logo.svg" alt="Logo" width="120" height="120">
<h1 class="h3 mb-4 fw-normal">登录</h1>
<div class="mb-4
form-floating">
<label for="username">用户</label>
<input type="text" class="
form-control" id="username">
</div>
<div class="mb-4
form-floating">
<label for="password">密码</label>
<input type="password" class="
form-control" id="password">
</div>
<
button class="w-100 btn btn-lg btn-dark" type="submit">登录</
button>
<p class="mt-5 mb-3 text-muted">© 2025–2035</p>
</
form>
</div>
</body>
</
html>
本文揭示了一个常见的前端问题：当button未设置type属性时，表单会意外刷新。解决方法是在button上添加type=button属性，避免不必要的请求。
扫一扫
1183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
