在表格中添加行（使用 jquery），这是一个表单元素

Question

我有一个包含表格的表格。表格每一行中的每个单元格都有一个输入字段或一个单选按钮。见下方代码：

   <div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"><b>Material [S]</b>upplied | <b>[R]</b>emoved | <b>[F]</b>ollow up
          <button type="button" class="btn btn-success" id="addRow">Add Row <span class="glyphicon glyphicon-plus-sign"></span></button>
        </div>

        <!-- Table -->
        <div class="table-responsive container-fluid" id="datatable_material">
          <table class="table table-bordered table-hover" id="results_material">
            <thead>
              <tr class="tablehead_material">
                <th>Qty</th>
                <th>Part Number</th>
                <th>Description</th>
                <th>Serial Number</th>
                <th>[S]</th>
                <th>[R]</th>
                <th>[F]</th>
              </tr>
            </thead>

            <tbody id="material"> 
              <tr>
                <td>
                  <input type="text" class="form-control" id="qty" name="qty_1" placeholder="Quantity">
                </td>
                <td>
                  <input type="text" class="form-control" id="part_no" name="part_no_1" placeholder="Part No">
                </td> 
                <td>
                  <input type="text" class="form-control" id="description" name="description_1" placeholder="Description">
                </td>
                <td>
                  <input type="text" class="form-control" id="serialnumber" name="serialnumber_1" placeholder="Serial Number">
                </td> 
                <td>
                  <input type="radio" name="material_1" id="supplied_1" value="supplied">
                </td> 
                <td>
                  <input type="radio" name="material_1" id="removed_1" value="removed">
                </td>  
                <td>
                  <input type="radio" name="material_1" id="followup_1" value="followup">
                </td>    
              </tr>
            </tbody>
          </table>
        </div><!-- /.table-responsive -->
      </div>

您可能会看到表格位于面板内，在面板的顶部，我有一个按钮，用于在必要时在表格中添加新行。

为了在表格中添加新行，我使用以下 JavaScript 代码：

$("#addRow").click(funtion(){

  $('#results_material > tbody:last-child').append(
    '<tr>
      <td>
        <input type="text" class="form-control" id="qty" name="qty_1" placeholder="Quantity">
      </td>
      <td>
        <input type="text" class="form-control" id="part_no" name="part_no_1" placeholder="Part No">
      </td> 
      <td>
        <input type="text" class="form-control" id="description" name="description_1" placeholder="Description">
      </td>
      <td>
        <input type="text" class="form-control" id="serialnumber" name="serialnumber_1" placeholder="Serial Number">
      </td> 
      <td>
        <input type="radio" name="material_1" id="supplied_1" value="supplied">
      </td> 
      <td>
        <input type="radio" name="material_1" id="removed_1" value="removed">
      </td>  
      <td>
        <input type="radio" name="material_1" id="followup_1" value="followup">
      </td>    
    </tr>'
    );
});

第一个问题：append 方法内的部分代码不能有空格，而是必须在一行中。这使得代码 难以阅读。有什么解决办法吗？

第二个问题：每行输入字段的名称应该不同（提交时需要）。例如第二行应该有 name="qty_2" 等。有什么想法吗？

Answer 1

修改您的代码。

var last_inserted = 2;
$("#addRow").click(function(){

  $('#results_material > tbody:last-child').append(
    '<tr>'+
      '<td>'+
        '<input type="text" class="form-control" id="qty_'+last_inserted+'" name="qty_'+last_inserted+'" placeholder="Quantity">'+
      '</td>'+
      '<td>'+
        '<input type="text" class="form-control" id="part_no_'+last_inserted+'" name="part_no_'+last_inserted+'" placeholder="Part No">'+
      '</td>'+
      '<td>'+
        '<input type="text" class="form-control" id="description_'+last_inserted+'" name="description_'+last_inserted+'" placeholder="Description">'+
      '</td>'+
      '<td>'+
        '<input type="text" class="form-control" id="serialnumbe_'+last_inserted+'r" name="serialnumber_'+last_inserted+'" placeholder="Serial Number">'+
      '</td> '+
      '<td>'+
        '<input type="radio" name="material_'+last_inserted+'" id="supplied_'+last_inserted+'" value="supplied">'+
      '</td> '+
      '<td>'+
        '<input type="radio" name="material_'+last_inserted+'" id="removed_'+last_inserted+'" value="removed">'+
      '</td>'+
      '<td>'+
        '<input type="radio" name="material_'+last_inserted+'" id="followup_'+last_inserted+'" value="followup">'+
      '</td>'+
    '</tr>'
    );
  last_inserted++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
        <!-- Default panel contents -->
        <div class="panel-heading"><b>Material [S]</b>upplied | <b>[R]</b>emoved | <b>[F]</b>ollow up
          <button type="button" class="btn btn-success" id="addRow">Add Row <span class="glyphicon glyphicon-plus-sign"></span></button>
        </div>

        <!-- Table -->
        <div class="table-responsive container-fluid" id="datatable_material">
          <table class="table table-bordered table-hover" id="results_material">
            <thead>
              <tr class="tablehead_material">
                <th>Qty</th>
                <th>Part Number</th>
                <th>Description</th>
                <th>Serial Number</th>
                <th>[S]</th>
                <th>[R]</th>
                <th>[F]</th>
              </tr>
            </thead>

            <tbody id="material"> 
              <tr>
                <td>
                  <input type="text" class="form-control" id="qty" name="qty_1" placeholder="Quantity">
                </td>
                <td>
                  <input type="text" class="form-control" id="part_no" name="part_no_1" placeholder="Part No">
                </td> 
                <td>
                  <input type="text" class="form-control" id="description" name="description_1" placeholder="Description">
                </td>
                <td>
                  <input type="text" class="form-control" id="serialnumber" name="serialnumber_1" placeholder="Serial Number">
                </td> 
                <td>
                  <input type="radio" name="material_1" id="supplied_1" value="supplied">
                </td> 
                <td>
                  <input type="radio" name="material_1" id="removed_1" value="removed">
                </td>  
                <td>
                  <input type="radio" name="material_1" id="followup_1" value="followup">
                </td>    
              </tr>
            </tbody>
          </table>
        </div><!-- /.table-responsive -->
      </div>

Answer 2

我建议采用以下方法：

$('#addRow').on('click', function(){
  // finding the <tr> elements within the
  // #material <tbody> element, and keeping only
  // last of those:
  var lastRow = $('#material').find('tr').last(),

      // retrieving the rowIndex property of that last
      // <tr> element, and adding 1 to it (to use it
      // later):
      newLastIndex = lastRow.prop('rowIndex') + 1,

      // cloning the lastRow, along with its event-handlers
      // and data (the first true), along with its descendants
      // and their event-handlers and data (the second true):
      clone = lastRow.clone(true,true);

      // inserting the clone after the last row, then
      // finding the descendant <input> elements, and
      // updating their 'name' and 'id' properties:
      clone.insertAfter(lastRow).find('input').prop({

        // updating the 'name':
        'name' : function(i,c) {
          // replacing the sequence of numbers from
          // end of the string with the newLastIndex:
          // c       : the current value of the property to
          //           be changed,
          // i       : the index of the current element in
          //           the collection of elements,
          // '/.../' : regexp literal, 
          // '\d+'   : a sequence of one, or more, number
          //           characters
          // '$'     : end-of-string special character:
          return c.replace(/\d+$/, newLastIndex);
        },
        'id' : function(i,c) {

          switch (this.type) {
            // if the 'type' of the current <input> is
            // 'text:
            case 'text':
              // c is set to the name of the current
              // element:
              c = this.name;
              break;

            // if it's either a 'radio' or 'checkbox':
            case 'radio':
            case 'checkbox':
              // we replace the number at the end of
              // String wtih the newLastIndex variable:
              c = c.replace(/\d+$/, newLastIndex);
          }

          // returning the new property-value:
          return c;
        }
      });
});

$('#addRow').on('click', function() {
  var lastRow = $('#material').find('tr').last(),
    newLastIndex = lastRow.prop('rowIndex') + 1,
    clone = lastRow.clone(true, true),
    inputs = clone.insertAfter(lastRow).find('input').prop({
      'name': function(i, c) {
        return c.replace(/\d+$/, newLastIndex);
      },
      'id': function(i, c) {
        switch (this.type) {
          case 'text':
            c = this.name;
            break;
          case 'radio':
          case 'checkbox':
            c = c.replace(/\d+$/, newLastIndex);
        }
        return c;
      }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading"><b>Material [S]</b>upplied | <b>[R]</b>emoved | <b>[F]</b>ollow up
    <button type="button" class="btn btn-success" id="addRow">Add Row <span class="glyphicon glyphicon-plus-sign"></span>
    </button>
  </div>

  <!-- Table -->
  <div class="table-responsive container-fluid" id="datatable_material">
    <table class="table table-bordered table-hover" id="results_material">
      <thead>
        <tr class="tablehead_material">
          <th>Qty</th>
          <th>Part Number</th>
          <th>Description</th>
          <th>Serial Number</th>
          <th>[S]</th>
          <th>[R]</th>
          <th>[F]</th>
        </tr>
      </thead>

      <tbody id="material">
        <tr>
          <td>
            <input type="text" class="form-control" id="qty" name="qty_1" placeholder="Quantity">
          </td>
          <td>
            <input type="text" class="form-control" id="part_no" name="part_no_1" placeholder="Part No">
          </td>
          <td>
            <input type="text" class="form-control" id="description" name="description_1" placeholder="Description">
          </td>
          <td>
            <input type="text" class="form-control" id="serialnumber" name="serialnumber_1" placeholder="Serial Number">
          </td>
          <td>
            <input type="radio" name="material_1" id="supplied_1" value="supplied">
          </td>
          <td>
            <input type="radio" name="material_1" id="removed_1" value="removed">
          </td>
          <td>
            <input type="radio" name="material_1" id="followup_1" value="followup">
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- /.table-responsive -->
</div>