Question

我想以动态方式在html表单中添加行。但是，我有一个小问题：我的表格是：

<html lang="en">
<head>
    <!-- CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <!-- Javascript -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
    <script src="scripts.js"></script> 
</head>

<body>
    <div id = "mydiv" class="controls  multi-field-wrapper row">
        <div class="multi-fields">
            <div class="multi-field col-md-11 col-lg-11">
                <input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
                <input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
            </div>
        <a href="#" class="col-md-1 col-lg-1" style='margin: 0; padding: 0; border: 0; float: left;'>
            <span class="add-field glyphicon glyphicon-plus-sign"></span>
        </a>
    </div> 
</body>
</html>

我的jquery脚本是

jQuery(document).ready(function() {
    $('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    var remove = '<a href="#" style="padding-left:20px" class ="remove-field "><span class=" glyphicon glyphicon-minus-sign"></span></a>';

    $(".add-field", $(this)).on('click', function(e)  {
        e.preventDefault();
        $('.multi-field:first-child', $wrapper).clone(true).append(remove).appendTo($wrapper).find('input').val('').focus();
    });
    $('.multi-field ', $wrapper).on('click', '.remove-field' ,function(e) {
       e.preventDefault();
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});
});

然而问题是加号字形远离文本框，而减去字形更接近所需，如图像中所示。如何将加号字形移动到与文本框中的负字形相似的距离。

这应该是非常的，但我是该领域的新手，你能否找出问题并提出解决方案。谢谢！

Answer 1

演示：https://jsfiddle.net/gurn5zh9/

首先将a tag add new field放入main div

<div id = "mydiv" class="controls  multi-field-wrapper row">
  <div class="multi-fields">
    <div class="multi-field col-md-11 col-lg-11">
      <input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
      <input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
    <a href="#" class="col-md-1 col-lg-1 addField" style='padding-left:20px'>
      <span class="add-field glyphicon glyphicon-plus-sign"></span>
    </a>
    </div>
  </div> 
  </div>

然后在您的脚本中将其从克隆中删除：

jQuery(document).ready(function() {
    $('.multi-field-wrapper').each(function() {
    var $wrapper = $('.multi-fields', this);
    var remove = '<a href="#" style="padding-left:20px" class ="remove-field "><span class=" glyphicon glyphicon-minus-sign"></span></a>';

    $(".add-field", $(this)).on('click', function(e)  {
        e.preventDefault();
        $ccc = $('.multi-field:first-child', $wrapper).clone(true).append(remove).appendTo($wrapper);
        $ccc.find('.addField').remove();
        $ccc.find('input').val('').focus();
    });
    $('.multi-field ', $wrapper).on('click', '.remove-field' ,function(e) {
       e.preventDefault();
        if ($('.multi-field', $wrapper).length > 1)
            $(this).parent('.multi-field').remove();
    });
});
});

Answer 2

你的jQuery代码没有任何问题。但问题在于您的HTML代码。这里

您没有正确关闭html标签
在HTML和js文件中正确使用您的类，您可以动态地创建HTML元素。如果你想要相同的功能，可以使用相同的css样式。

不要改变你的脚本＆amp;试试这个

<html lang="en">
  <head>
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<!-- Javascript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<script src="scripts.js"></script> 
</head>

<body>
<div id = "mydiv" class="controls  multi-field-wrapper row">
    <div class="multi-fields">
        <div class="multi-field col-md-11 col-lg-11">
            <input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
            <input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
            <a href="#" style="padding-left:20px;" class="add-field">
                <span class="glyphicon glyphicon-plus-sign"></span>
            </a>
        </div>

    </div>      
</div> 
</body>
</html>

输出

Answer 3

事实上，“plusicon”的“a”标签不属于div“multi-fields”。创建新行时，在“多字段”div中追加“minusicon”。这就是为什么它们之间的位置不一样。

可以修复它的坏事：

<a href="#" class="col-md-1 col-lg-1" style='margin: 0; padding: 0; border: 0; float: left; margin-left: -88px;'>

我正在寻找一种更好的方法，使用jquery，当我找到它时更新。

更新：

首先，将你的plusicon标签放入多字段div

    <div class="multi-field col-md-11 col-lg-11">
        <input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
        <input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-5 col-lg-5 " >
         <a href="#" class="col-md-1 col-lg-1" style='mpadding-left:20px '>
            <span class="add-field glyphicon glyphicon-plus-sign"></span>
        </a>
    </div>

然后，当您想要克隆它时，从克隆中删除一个标记。

   $(".add-field", $(this)).on('click', function(e)  {
        e.preventDefault();
        var newclone =  $('.multi-field:first-child', $wrapper).clone(true);
        newclone.find("a").remove();
        newclone.append(remove).appendTo($wrapper).find('input').val('').focus();
    });

Answer 4

提示：您忘了关闭<div class="multi-fields">：）

Answer 5

试试这个：

<input type="text" name="how_many[]" placeholder="How many?" class="col-md-6 col-lg-6" >
<input type="text" name="where_when[]" placeholder="When and Where?" class="col-md-6 col-lg-6 " >

删除两个html元素之间的空间：textbox和glyphicon

5 个答案: