Question

HTML：

<table>
    <tr>
        <td>
            <input type="text" name="name[]"  value=" echo $ail">
            <label >Address</label>
            <input type="text" name="countryname[]" id='countryname_1' />
            <button type="button" class='btn btn-danger delete'>- Delete</button>
            <button type="button" class='btn btn-success addmore'>+ Add More</button>
        </td>
    </tr>
</table>

Js：

<script>    
    $(".delete").on('click', function() { 
        $('.case:checkbox:checked').parents("tr").remove(); 
        $('.check_all').prop("checked", false); check(); 
    }); 

    var i = $('table tr').length; 
    $(".addmore").on('click', function(){ 
        count = $('table tr').length; 
        var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + i + "'>" + count + ".</span></td>"; data += "<td><input class='form-control' type='text' id='countryname_" + i + "' name='countryname[]' required/></td> </tr>"; $('table').append(data); row = i; 
    });
</script>

我在<? echo $ail;?>中获得了多个值。

如何在每个$ail值前面添加更多按钮以提供一行输入框？

因为当我点击$ail按钮的一个值时，我有多个Add值，我会在$ail的每个字段上增加。

Answer 1

您可以将此示例用于您的问题。

js code：

$(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
$(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).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
}
});

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

Html代码：

<div class="input_fields_wrap">

<button class="add_field_button">Add More Fields</button>

<div><input type="text" name="mytext[]"></div>

</div>

Answer 2

问题不是很清楚，但大概是<? echo $ail;?>显示PHP数组的内容，但是你想循环遍历数组并实现类似图像中显示的功能。

PHP代码：

<?php
  // $options starts life as an empty string
  $options = "";
  // $options becomes a list of options for a <select> control
  // it is populated with the values from the $ail array
  foreach ($ail as $value) {
     $options = "<option value='".$value."'>".$value."</option>";
  }
?>

HTML code：

<table>
  <tr>
    <td>
      Ailment:
      <select id="ail_select" name="ail_select">
        <option value="">--- Select ---</option>
        <?php echo $options; ?>
      </select>
      <button type="button" class='btn btn-success addmore'>Add More</button>
    </td>
  </tr>
</table>

JS代码：

$(document).ready(function(){

  $(".delete").on("click", function() { 
    $(".case:checkbox:checked").parents("tr").remove(); 
    $(".check_all").prop("checked", false);
    check();
  }); 

  var counter = $("table tr").length - 1;

  $(".addmore").on("click", function(){
    // get the selected ailment
    var ail = $("#ail_select").val();
    // ail must have a value
    if (ail.length > 0) {
      counter++;
      var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + counter + "'>" + ail + ".</span></td>";
      data += "<td><input class='form-control' type='text' id='countryname_" + counter + "' name='countryname[]' required/></td>";
      data += "</tr>";
      $("table").append(data);
    }
  });

});

例如，请参阅JSFiddle。

如何在while循环中添加更多行的同一输入框

2 个答案: