Question

Jquery的新手，经过一段时间的努力解决这个问题，我想最好只问一个问题;所以，提前感谢任何帮助。

目前，在触发更多按钮后，删除链接位于每个新“金额”行的下方;但是我希望它在一边;如果你愿意，可以在下一行。我尝试添加另一个隐藏列，然后将链接附加到该行，如果您了解我，但这只会产生更多问题。有这样一种巧妙的方法吗？

<!DOCTYPE HTML>
<html>

<head>

<script     src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count


    // append for each div

$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $("#item").append('<div><input type="text" name="item" size="8"     </div>');
        $("#description").append('<div><input type="text" name="description" size="24" </div>'); 
        $("#qty").append('<div><input type="text" name="qty" size="4" id = \"a' + x + '\"></div>'); 
        $("#unit").append('<div><input type="text" name="unit" size="8" </div>');   
        $("#price").append('<div><input type="text" name="price" size="6" id = \"b' + x + '\"></div>'); 
        $("#discount").append('<div><input type="text" name="discount" size="4" id = \"c' + x + '\"></div>'); 
        $("#account").append('<div><input type="text" name="account" size="4" </div>'); 
        $("#taxrate").append('<div><input type="text" name="tax rate" size="16" </div>'); 
        $("#amount").append('<div><input type="text" name="amount" size="8" id = \"d' + x + '\"><a href="#" class="remove_field">Remove</a></div>');

    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;   
})
});
</script>

<style>
#container{
position:relative;
background-color: lightgrey;
height: 400px;
width: 1000px;
padding: 35px;
border: 25px solid navy;
margin: auto;
margin-top: 100px;
}

.indented {   
padding-left: 350pt;
}

input, label {
display:block;
}

#morebutton{
position: absolute;
top: 400px;
right: 0;
width: 1000px;
}

#remove{
float: left;
}



</style>

</head>

<body>

<div id = "container">


<div class ="input_fields_wrap">
<div id = "item" style="float:left;">
    <label for="name">Item</label>
    <input type="text" name="item" size="8">
</div>

<div id = "description" style="float:left;">
    <label for="name">Description</label>
    <input type="text" name="description" size="24">
</div>

<div id = "qty" style="float:left;">
    <label for="name">Qty</label>
    <input type="text" name="qty" size="4">
</div>

<div id = "unit" style="float:left;">
    <label for="name">Unit</label>
    <input type="text" name="unit" size="8">
</div>

<div id = "price" style="float:left;">
    <label for="name">Price</label>
    <input type="text" name="price" size="6">
</div>

<div id = "discount" style="float:left;">
    <label for="name">Discount</label>
    <input type="text" name="disc" size="4">
</div>

<div id = "account" style="float:left;">
    <label for="name">Account</label>
    <input type="text" name="account" size="4">
</div>

<div id = "taxrate" style="float:left;">
    <label for="name">Tax Rate</label>
    <input type="text" name="tax rate" size="16">   
</div>

<div id = "amount" style="float:left;">
    <label for="name">Amount</label>
    <input type="text" name="amount" size="8">
</div>

</div>

<div id = "morebutton">
<button class="add_field_button">Add More</button>
</div>

</div>

</body>

</html>

Answer 1

我编辑了jsfiddle以使其适用于表格。我没有看到你使用这种结构在php中有哪些问题。我很确定它可以正常使用

<div id = "container">

<form>
  <table>
  <thead>
    <tr>
      <td>
        Item
      </td>
      <td>
        Description
      </td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td><a href="#" class="remove_field">Remove</a></td>
    </tr>
  </tbody>
  </table>
</form>

<div id = "morebutton">
<button class="add_field_button">Add More</button>
</div>

</div>

和你的javascript：

$(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initlal text box count


    // append for each div

$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        var trClone = $('table tbody tr:first').clone();
        trClone.find('.remove_field').css('display', 'block');
        trClone.find('input').val('');
        $('table tbody').append(trClone);

    }
});

$('table').on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); 
    $(this).parents('tr').remove(); 
    x--;   
})
});

Answer 2

使用您提供的HTML，很难做到这一点。这是我的解决方案与您的HTML完全一致。这是一个有效的fiddle。

只需将您的javascript更改为

即可

  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count

  var blankDiv = $('<div></div>');
  // append for each div
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      wrapper.find('div').each(function() {
        var $input = $(this).find('input').first().clone().val('');
        $input.addClass('after-' + x);
        blankDiv.html('').append($input);
        if ($(this).attr('id') == 'amount') {
          blankDiv.append('<a href="" class="remove_field" data-remove="after-' + x + '" >Remove</a>');
        }
        $(this).append(blankDiv.html());
      })
    }
  });
  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    var remove = $(this).data('remove');
    $(this).remove();
    $('.' + remove).remove();
    x--;
  })

它可以在你的情况下工作，但我仍然建议你像html一样移动到表格。

＆＃13;

$(document).ready(function() {
  var max_fields = 10; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID

  var x = 1; //initlal text box count

  var blankDiv = $('<div></div>');
  // append for each div
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      wrapper.find('div').each(function() {
        var $input = $(this).find('input').first().clone().val('');
        $input.addClass('after-' + x);
        blankDiv.html('').append($input);
        if ($(this).attr('id') == 'amount') {
          blankDiv.append('<a href="" class="remove_field" data-remove="after-' + x + '" >Remove</a>');
        }
        $(this).append(blankDiv.html());
      })
    }
  });
  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    var remove = $(this).data('remove');
    $(this).remove();
    $('.'+remove).remove();
    x--;
  })
});

＆＃13;

#container {
  position: relative;
  background-color: lightgrey;
  height: 400px;
  width: 1000px;
  padding: 35px;
  border: 25px solid navy;
  margin: auto;
  margin-top: 100px;
}
.indented {
  padding-left: 350pt;
}
input,
label {
  display: block;
}
#morebutton {
  position: absolute;
  top: 400px;
  right: 0;
  width: 1000px;
}
#remove {
  float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">


  <div class="input_fields_wrap">
    <div id="item" style="float:left;">
      <label for="name">Item</label>
      <input type="text" name="item" size="8">
    </div>

    <div id="description" style="float:left;">
      <label for="name">Description</label>
      <input type="text" name="description" size="24">
    </div>

    <div id="qty" style="float:left;">
      <label for="name">Qty</label>
      <input type="text" name="qty" size="4">
    </div>

    <div id="unit" style="float:left;">
      <label for="name">Unit</label>
      <input type="text" name="unit" size="8">
    </div>

    <div id="price" style="float:left;">
      <label for="name">Price</label>
      <input type="text" name="price" size="6">
    </div>

    <div id="discount" style="float:left;">
      <label for="name">Discount</label>
      <input type="text" name="disc" size="4">
    </div>

    <div id="account" style="float:left;">
      <label for="name">Account</label>
      <input type="text" name="account" size="4">
    </div>

    <div id="taxrate" style="float:left;">
      <label for="name">Tax Rate</label>
      <input type="text" name="tax rate" size="16">
    </div>

    <div id="amount" style="float:left;">
      <label for="name">Amount</label>
      <input type="text" name="amount" size="8">
    </div>
  </div>
  <div id="morebutton">
    <button class="add_field_button">Add More</button>
  </div>

</div>

＆＃13;

Jquery：将链接添加到正确的位置

2 个答案: