帮我用jquery html js css 写一个表头是产品、金额、名字的动态添加所有行后一起提交表单到后端的demo
时间: 2024-05-10 14:20:36 浏览: 6
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>动态表单提交</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, 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. 在后端接口中，你需要解析表单数据并进行相应的处理（例如存储到数据库中）。
相关推荐
最新推荐
利用jquery给指定的table动态添加一行、删除一行的方法
下面小编就为大家带来一篇利用jquery给指定的table动态添加一行、删除一行的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基于jQuery获取table数据发送到后端
主要介绍了基于jQuery获取table数据发送到后端,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Jquery中ajax提交表单几种方法(get、post两种方法)
在jquery中ajax提交表单有post与get方式，在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了，下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程HTTP ，下面我...
jQuery动态添加li标签并添加属性和绑定事件方法
下面小编就为大家分享一篇jQuery动态添加li标签并添加属性和绑定事件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jquery动态添加option示例
jquery动态添加option js动态添加option 代码如下:var sel= document.getElementById(“Selected1”); sel.options.add(new Option(“请选择”,””));sel.options.add(new Option(“name”,”id”)); jquery...
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MATLAB柱状图在信号处理中的应用：可视化信号特征和频谱分析
# 1. MATLAB柱状图概述**
MATLAB柱状图是一种图形化工具，用于可视化数据中不同类别或组的分布情况。它通过绘制垂直条形来表示每个类别或组中的数据值。柱状图在信号处理中广泛用于可视化信号特征和进行频谱分析。
柱状图的优点在于其简单易懂，能够直观地展示数据分布。在信号处理中，柱状图可以帮助工程师识别信号中的模式、趋势和异常情况，从而为信号分析和处理提供有价值的见解。
# 2. 柱状图在信号处理中的应用
柱状图在信号处理
解释这行代码 c = ((double)rand() / RAND_MAX) * (a + b - fabs(a - b)) + fabs(a - b);
这行代码是用于生成 a 和 b 之间的随机数。首先，它使用 rand() 函数生成一个 [0,1) 之间的随机小数，然后将这个小数乘以 a、b 范围内的差值，再加上 a 和 b 中的较小值。这可以确保生成的随机数大于等于 a，小于等于 b，而且不会因为 a 和 b 之间的差距过大而导致难以生成足够多的随机数。最后，使用 fabs() 函数来确保计算结果是正数。
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。