jQuery

来源：互联网发布：小狐仙软件编辑：程序博客网时间：2024/06/07 00:29

一、在 Form 表单中动态新增、删除项目

在 Web 开发中，使用 form 表单提交数据大家一定不会陌生。但有时表单项数量并不是固定的，比如我们要提交一个人员信息列表，人员数量不定，填写完毕后一次性提交。这就要求表单可以动态地增加或删除输入项。

1，效果图

（1）页面初始化后默认有两个表单项（两个输入框）。

（2）点击“新增一项”按钮，则在末尾添加一个新的输入条目。

（3）点击“删除”按钮则将对应的输入条目给删去。

（4）点击“提交”按钮则将表单中所有的项目进行提交。

原文:jQuery - 动态添加、删除form表单项（附：新增项数据无法提交问题解决）

2，样例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hangge.comm</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
        #container{
            width:380px;
            margin:20px auto;
            padding:15px;
            background-color:#eee;
          border-radius: 15px;
        }
        /** 新增按钮 **/
        #addVar{
            margin:0 0 0 52px;
            padding:5px;
            display:inline-block;
            background-color:#3A9668;
            color:#f1f1f1;
            border:1px solid #005;
            border-radius: 4px;
        }
        /** 删除按钮 **/
        .removeVar{
            margin:auto;
            padding:5px;
            display:inline-block;
            background-color:#B02109;
            color:#f1f1f1;
            border:1px solid #005;
          border-radius: 4px;
        }
 
        #addVar:hover, .removeVar:hover{
            cursor: pointer;
        }
 
        .alignRight{
            text-align: right;
        }
 
        input, textarea{
            padding:5px;
            font-size: 16px;
        }
    </style>
    <script>
        //初始参数个数
        var varCount = 2;
 
        $(function () {
          //新增按钮点击
            $('#addVar').on('click', function(){
                varCount++;
                $node = '<p><label for="var'+varCount+'">项目 '+varCount+': </label>'
                  + '<input type="text" name="var'+varCount+'" id="var'+varCount+'">'
                  + '<span class="removeVar">删除</span></p>';
            //新表单项添加到“新增”按钮前面
                $(this).parent().before($node);
            });
 
          //删除按钮点击
          $('form').on('click', '.removeVar', function(){
            $(this).parent().remove();
            //varCount--;
          });
        });
    </script>
</head>
<body>
    <div id="container">
      <form id="myForm" method="post">
        <p>
          <label for="var1">项目 1: </label>
          <input type="text" name="var1" id="var1">
          <span class="removeVar">删除</span>
        </p>
        <p>
          <label for="var2">项目 2: </label>
          <input type="text" name="var2" id="var2">
          <span class="removeVar">删除</span>
        </p>
        <p><span id="addVar">新增一项</span></p>
        <p class="alignRight"><input type="submit" value="提交"></p>
      </form>
    </div>
</body>
</html>

3，运行效果

这里我新增一个条目，一个提交 3 条数据。从捕获的请求可以看到，3 条数据都已成功提交。

二、动态新增项目的数据无法提交问题

可能有人碰到数据丢失问题，明明新增的 input 元素是在 Form 内部，界面上也能显示，可提交的时候这个 input 数据却带不过去。下面通过样例进行解释。

1，问题样例

可能有人喜欢表单使用 table 进行布局。比如我们在 form 外包裹个 table，然后动态新增的项目插入到 td。具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hangge.comm</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
        #container{
            width:270px;
            margin:20px auto;
            padding:15px;
            background-color:#eee;
          border-radius: 15px;
        }
 
        button, input, textarea{
            padding:5px;
            font-size: 16px;
        }
    </style>
    <script>
        //初始参数个数
        var varCount = 2;
 
        $(function () {
          //新增按钮点击
            $('#addVar').on('click', function(){
                varCount++;
                $node = '<p><label for="var'+varCount+'">项目 '+varCount+': </label>'
                  + '<input type="text" name="var'+varCount+'" id="var'+varCount+'"></p>';
                  //新表单项添加到td中
                $("#myTd").append($node);
            });
        });
    </script>
</head>
<body>
  <div id="container">
      <table id="myTable">
        <form id="myForm" method="post">
          <tr>
            <td id="myTd">
              <p><label for="var1">项目 1: </label><input type="text" name="var1" id="var1"></p>
              <p><label for="var2">项目 2: </label><input type="text" name="var2" id="var2"></p>
            </td>
          </tr>
          <tr>
            <td>
              <input id="addVar" type="button" value="新增一项"/>
              <input type="submit" value="提交" style="float:right"/>
            </td>
          </tr>
        </form>
      </table>
  </div>
</body>
</html>

这次我们同样提交3条数据（默认两个，新增一个）。抓取数据后发现，新添加的那个表单项数据并没有随表单一起提交。

2，问题解决

这个问题比较奇葩。我们将 form 与 table 层次调整下便能解决问题，将原来的 table 包裹 from，改成 form 包裹 table 即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="container">
  <form id="myForm" method="post">
    <table id="myTable">
      <tr>
        <td id="myTd">
          <p><label for="var1">项目 1: </label><input type="text" name="var1" id="var1"></p>
          <p><label for="var2">项目 2: </label><input type="text" name="var2" id="var2"></p>
        </td>
      </tr>
      <tr>
        <td>
          <input id="addVar" type="button" value="新增一项"/>
          <input type="submit" value="提交" style="float:right"/>
        </td>
      </tr>
    </table>
  </form>
</div>

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1650.html

阅读全文

0 0