Question

我想一键添加一个新的引导行，我试过这个，但我只得到一个带有数字的新行，而不是一个完整行的副本：

$(document).ready(function(){
    var i=1;
    $("#add_row").click(function(){
    $('#addr'+i).html("<td>"+ (i+1) +"</td>")

    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
        i++;
    });

    $("#delete_row").click(function(){
        if(i>1){
            $("#addr"+(i-1)).html('');
            i--;
        }
    });
 });

脚本：

{{1}}

为什么只添加带有行数而不是带有两个下拉列表和一个字段的行的新行？提前谢谢！

Answer 1

只是因为你在"<td>"+ (i+1) +"</td>"传递的内容。

您可以在添加的每一行中添加默认行#addr0的内容：

$('#addr'+i).html($('#addr0').html());

希望这有帮助。

＆＃13;

$(document).ready(function(){
  var i=1;
  $("#add_row").click(function(){
    $('#addr'+i).html($('#addr0').html());

    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
    i++;
  });
  $("#delete_row").click(function(){
    if(i>1){
      $("#addr"+(i-1)).html('');
      i--;
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<table class="table table-bordered table-hover" id="tab_logic">
  <thead>
    <tr>
      <th class="text-center">
        Comment
      </th>
      <th class="text-center">
        Price
      </th>
      <th class="text-center">
        Type
      </th>
    </tr>
  </thead>
  <tbody>
    <tr id='addr0'>
      <td>
        <div class="smart-widget sm-right ">
          <label for="client" class="field prepend-icon required-field">
            <select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
          </label>
        </div>
      </td>
      <td>
        <br>
        <div class="smart-widget sm-right ">
          <label for="cop" class="field prepend-icon required-field">
            Price
            <input type="text" name="cop" id="cop" class="gui-input">
          </label>
        </div>
      </td>
      <td>
        <div class="smart-widget sm-right ">
          <label for="client" class="field prepend-icon required-field">
            <label for="client" class="control-label"> Type</label>
            <select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
          </label>
        </div>
      </td>
    </tr>
    <tr id='addr1'></tr>

  </tbody>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>

＆＃13;

Answer 2

您必须将以前的HTML代码添加到新行中。

<script>
    $(document).ready(function(){
        var i=1;
        $("#add_row").click(function(){
            lastobj = "#addr"+""+(i-1);
            content = $(lastobj).html();
            $('#addr'+i).html(content);
            $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
            i++;
        });
        $("#delete_row").click(function(){
            if(i>1){
                $("#addr"+(i-1)).html('');
                i--;
            }
        });

    });
</script>

还可以使用ID来获取它们的值或使用数组。

动态添加行

2 个答案: