HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>动态表单提交</title>
<meta charset="utf-8">
<meta name="viewport" content="w
idth=device-w
idth, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="container mt-3">
<h2>动态表单提交</h2>
<form
id="myForm">
<table class="table">
<thead>
<tr>
<th>产品</th>
<th>金额</th>
<th>名字</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" name="product[]" required></td>
<td><input type="number" class="form-control" name="amount[]" required></td>
<td><input type="text" class="form-control" name="name[]" required></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-primary"
id="addRow">添加行</button>
<button type="submit" class="btn btn-success">提交</button>
</form>
</div>
<script>
$(document).ready(function() {
// 点击添加行按钮
$("#addRow").click(function() {
var html = '<tr>';
html += '<td><input type="text" class="form-control" name="product[]" required></td>';
html += '<td><input type="number" class="form-control" name="amount[]" required></td>';
html += '<td><input type="text" class="form-control" name="name[]" required></td>';
html += '</tr>';
$("tbody").append(html); // 动态添加行
});
// 提交表单
$("#myForm").submit(function(event) {
event.preventDefault(); // 阻止默认的表单提交行为
var formData = $(this).serialize(); // 序列化表单数据
$.ajax({
url: "your-backend-url.
php", // 后端接口地址
type: "POST",
data: formData, // 表单数据
success: function(response) {
alert("表单提交成功！");
},
error: function() {
alert("表单提交失败！");
}
});
});
});
</script>
</body>
</html>
```
解释：
1. 在HTML代码中，我们首先定义了一个包含表单的`<div>`容器，表单中包含一个表格和两个按钮。
2. 表格中有一个表头和一个空的表体行，表头包含三个表头单元格，分别为“产品”、“金额”和“名字”。
3. 表体行中包含三个表单输入，分别为产品、金额和名字，它们的`name`属性都是一个数组，这样我们就可以动态地添加
多个产品行。
4. 在JavaScript代码中，我们使用jQuery选择器来选中添加行按钮和表单，并为它们分别绑定事件。
5. 点击添加行按钮时，我们使用jQuery的`append()`方法动态地向表格中添加
一行，这行包含三个表单输入，名称分别为“product[]”、“amount[]”和“name[]”。
6. 提交表单时，我们使用jQuery的`serialize()`方法序列化表单数据，然后使用jQuery的`ajax()`方法向后端接口发送POST请求，请求中包含表单数据。
7. 如果请求成功，我们弹出一个提示框，显示“表单提交成功”；如果请求失败，我们弹出一个提示框，显示“表单提交失败”。
注意：
1. 在实际使用中，你需要将代码中的“your-backend-url.
php”替换成你自己后端接口的URL地址。
2. 在后端接口中，你需要解析表单数据并进行相应的处理（例如存储到数据库中）。
1693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
