JS实现动态生成表格并提交表格数据向后端

第一步：引入JS库文件。

为了简化开发过程，我们需要引入jQuery库，它可以帮助我们更方便地操作DOM元素和发送AJAX请求。在HTML文件中添加以下代码来引入jQuery库：

```html

```

```html

```

```javascript

function addTable() {

var tableHtml = "";

tableHtml += '' +

'' +

'' +

'' +

'' +

'' +

'删除' +

'修改' +

'保存' +

'';

num++; // 更新行号

}

```

`editDataByOne`：编辑某一行的数据，使输入框变为可编辑状态。

`saveByOne`：保存某一行的数据，使输入框变为不可编辑状态。

在如何高效传递数据时，我发现了一种使用Json格式将多个参数传入后台的方法。于是，我根据这一思路，撰写了如下的代码实践。

```html

添加

提交

```

```javascript

var msg = $("submitForm").serialize(); //获取的参数形如canshu1=x&canshu2=x等

```

接下来，我们需要将这些参数转换成JSON格式的数据。由于JSON需要一个对象数组的形式，我们可以先以“&”分割字符串，得到一个键值对的数组，然后再以“=”分割每个键值对，得到键和值。我们需要判断何时开始一个新的JSON对象以及如何结束当前的对象。下面是转换过程的代码实现：

```javascript

var json = "[{"; // 开始构建JSON数组

var msg2 = msg.split("&"); // 以“&”分割字符串得到数组

var t = false; // 用于标记是否处于当前行的处理中

for (var i = 0; i < msg2.length; i++) {

var msg3 = msg2[i].split("="); // 再以“=”分割得到键和值

for (var j = 0; j < msg3.length; j++) {

json += "\"" + msg3[j] + "\""; // 构建JSON的键和值部分

if (j + 1 != msg3.length) { // 如果不是最后一个值，则加上冒号分隔符

json += ":";

}