jquery 2. 有一个表单,有用户名,密码,年龄及提交选项; 点击提交后, 在下面的表格中产生一条记录; 注意: 1. 初始会有一条表格头信息,只是在后面追加记录 2. 信息头为用户名,密码,年龄,操作 3. 点击删除操作, 可以删除指定记录
时间: 2024-03-10 14:46:41 浏览: 70
好的,这是一个前端开发的问题,我可以为您提供一个简单的解决方案。您需要使用 jQuery 来获取表单数据并将其添加到表格中。
首先,在 HTML 中创建一个表格和一个包含表单元素的表单,如下所示:
```
<table id="userTable">
<thead>
<tr>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<form id="userForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<label for="age">年龄:</label>
<input type="text" id="age" name="age"><br><br>
<input type="submit" value="提交">
</form>
```
接下来,在 JavaScript 中使用 jQuery 获取表单数据,并将其添加到表格中。您还需要添加一个删除按钮,以便用户可以删除记录。
```
$(function() {
// 当表单提交时
$('#userForm').submit(function(e) {
e.preventDefault(); // 防止表单提交到服务器
// 获取表单数据
var username = $('#username').val();
var password = $('#password').val();
var age = $('#age').val();
// 将数据添加到表格中
var newRow = '<tr><td>' + username + '</td><td>' + password + '</td><td>' + age + '</td><td><button class="deleteRow">删除</button></td></tr>';
$('#userTable tbody').append(newRow);
// 清空表单
$('#username').val('');
$('#password').val('');
$('#age').val('');
});
// 当删除按钮点击时
$('#userTable').on('click', '.deleteRow', function() {
$(this).closest('tr').remove();
});
});
```
这样,当用户提交表单时,将创建一个包含用户名、密码、年龄和删除按钮的新表格行,当用户点击删除按钮时,该行将从表格中删除。
阅读全文