jQuery从表单中获取信息插入表格
时间: 2024-03-18 10:40:24 浏览: 55
jquery validate.js表单验证的基本用法入门
可以使用jQuery的表单选择器和插入方法来实现。以下是一个简单的示例:
HTML代码:
```html
<form>
<label for="name">姓名:</label>
<input type="text" id="name">
<br>
<label for="age">年龄:</label>
<input type="number" id="age">
<br>
<button id="submit">提交</button>
</form>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```
jQuery代码:
```javascript
$(document).ready(function(){
$('#submit').click(function(event){
event.preventDefault(); // 阻止表单提交
var name = $('#name').val(); // 获取姓名
var age = $('#age').val(); // 获取年龄
$('table tbody').append('<tr><td>'+name+'</td><td>'+age+'</td></tr>'); // 插入表格
$('form')[0].reset(); // 重置表单
});
});
```
这段代码会在点击提交按钮后,获取表单中的姓名和年龄,然后将其插入到表格中。同时会重置表单,以便下次输入。
阅读全文