`cloneNode( true )`

Question

我在这里遇到麻烦。我在一个表格中有一个表格，其中一行中有一些输入元素，现在我想在点击一个按钮时生成一个新行，其中所有元素与前一行中的元素相同。我做了什么，我可以得到元素，但不是样式和类属性。

＆＃13;

function addRow_P(tableID_P) {
        var table = document.getElementById(tableID_P);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "checkbox";
        element1.name="chkbox[]";
        element1.class="i-checks"
        element1.style="position: absolute; opacity: 0;"
        cell1.appendChild(element1);
    
        var cell2 = row.insertCell(1);
        var array = ["Alaska","New York",];
        var element3 = document.createElement("select");
        //element3.type = "text";
        element3.name = "type[]";
        //element3.placeholder = "Item name or model";
        element3.id = "inputSuccess";
        element3.class = "span12 form-control"
        // elememt3.width = "220px"
        cell2.appendChild(element3);
    
        for (var i = 0; i < array.length; i++) {
          var option = document.createElement("option");
          option.value = array[i];
          option.text = array[i];
          element3.appendChild(option);
        }
    
    
        var cell3 = row.insertCell(2);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "name[]";
        element2.placeholder = "Item name or model";
        element2.id = "inputSuccess";
        element2.class = "span12 form-control"
        cell3.appendChild(element2);
      }

＆＃13;

<form role="form" data-toggle="validator">
                  <table class="table" id="product" style="margin-top: 10px" id="new-row" width="100%">
                      <tr>
                          <td>
                            <div class="form-group" style="margin-top:30px">
                            <input  class="i-checks"  style="position: absolute; opacity: 0;" type="checkbox">
                          </div>
                        </td>
                          <td width="600px">
                            <div class="form-group">
                              <label for="name">Product name</label>
                              <select class="select-product form-control"  style="width: 100%">
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                              </select>
                              <p class="help-block with-errors"></p>
                            </div>
                          </td>
                          <td width="200px">
                            <div class="form-group">
                              <label for="name">Quantity</label>
                              <input  class="form-control" type="text"  name="quantity" pattern="^[0-9].{1,}$" maxlength="10" data-error="Numbers only" required>
                              <p class="help-block with-errors"></p>
                            </div>
                          </td>
                          <td text-align="center">
                            <div class="form-group" style="margin-left:100px">
                              <label>New</label><br>
                              <button class="btn btn-primary btn-circle form-control" onclick="addRow_P('product')"><i class="fa fa-plus"></i>Add</button>
                            </div>
                          </td>
                         <!-- <td width="25%"> <input type="text" id="inputSuccess" name="serviceCharge[]"  placeholder="Enter service charge"> </td>-->
                      </tr>
                  </table>
    
    
                  <div class="col-lg-12">
                    <button class="btn btn-sm btn-primary m-t-n-xs" type="submit"><strong>Submit</strong></button>
                  </div>
                </form>

＆＃13;

这是我想要实现的屏幕截图

Answer 1

`cloneNode( true )`

Node.cloneNode()方法返回调用此方法的节点的副本。

deep 可选   如果还应克隆节点的子节点，则返回true;如果仅克隆指定节点，则返回false。

document.querySelector( "button" ).addEventListener( "click", () => {
  document.querySelector( "tbody" ).appendChild(
    document.querySelector( "tr" ).cloneNode( true )
  );
}, false );

<table>
  <tbody>
    <tr>
      <td>
        <input class="foo" type="number">
        <input class="bar" type="text">
        <input style="display:block;" type="range">
      </td>
      <td>
        <input class="foo" type="number">
        <input class="bar" type="text">
        <input style="display:block;" type="range">
      </td>
    </tr>
  </tbody>
</table>
<button>Clone row</button>

如果从默认值更改，此方法将克隆HTML的状态，但不会克隆任何<input>的值的状态。
如果还需要此功能（或任何其他功能），请在下面进行评论以获得更详细的演示。

更新为每次讨论包含jQuery和其他功能

在下面的示例中，克隆的行由id定位，因此克隆的id已移除removeAttr( 'id' )，因此不会通过HTML重复id

$( 'button' ).click( function() {
  $( '#row_to_clone' ).clone().removeAttr( 'id' ).appendTo( 'tbody' );
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr id="row_to_clone">
      <td>
        <input class="foo" type="number">
        <input class="bar" type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input class="baz" type="date">
        <input class="qux" type="email">
      </td>
    </tr>
  </tbody>
</table>
<button>Clone row</button>

Answer 2

使用jQuery的append（）函数来做这个......

＆＃13;

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $("#more"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
   
    var x = 0; //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('<label><input type="text" name="hello"/><button class="remove_field">&#10006;</button></label>'); //add input box
        }
    });
   
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        //e.preventDefault(); $(this).parent('div').remove(); x--;
		e.preventDefault(); $(this).closest('label').remove(); x--;
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST">
	<button class="add_field_button">Add More Member</button>
	<table id="more">
	  <input type="text" name="hello"/>
	</table>
	<input type="submit" value="Submit" name="submit" />
</form>

＆＃13;

如何添加包含上一行

2 个答案:

`cloneNode( true )`

更新为每次讨论包含jQuery和其他功能