动态添加行

Question

我想通过一次单击添加一个新的引导行，我尝试过这样做，但是我只得到一个带有数字的新行，而不是完整行的副本：

<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>

剧本：

$(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--;
        }
    });
 });

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

Answer 1

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

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

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

希望这能有所帮助。

​

$(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--;
    }
  });

});

<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>

​

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获取它们的值或使用数组。