JSクローン空のテーブルtr容器内

Question

タイトルが言うように、私はテーブルtrを複製しようとしていますが、これはliコンテナ内にあるはずです。次のように

私のコードは次のとおりです。

<ul> 
<li class="menu-item"> 

    <table class="km-admin-table-repeated-field" width="100%"> 
    <thead> 
     <tr> 
      <th width="2%">Delete</th> 
      <th width="2%">Sort</th> 
      <th width="60%">URL</th> 
      <th width="4%"></th> 
     </tr> 
    </thead> 
    <tbody class="ui-sortable" style="">   

      <tr class="km-meta-box-row" style=""> 
       <td><a class="km-admin-button button remove-row" href="#">close</a></td>   
       <td><a class="km-admin-button sort button">sort</a></td> 
       <td><input class="custom_media_url widefat" id="#" type="text" name="" value="#" placeholder="http://"></td> 
       <td><input class="button custom_media_upload" id="km_field_image_upload_button" type="button" value="Upload Image"></td> 
      </tr>   

    <!-- empty hidden one for jQuery // cloned field --> 
    <tr class="km-meta-box-row km-empty-row screen-reader-text"> 
     <td><a class="km-admin-button button remove-row" href="#">close</a></td>   
     <td><a class="km-admin-button sort button">sort</a></td> 
     <td><input id="km-image-button" class="widefat custom_media_url" type="text" name="#" placeholder="http://"></td> 
     <td><input id="km-image-button km_field_image_upload_button" class="button custom_media_upload" type="button" value="Upload Image"></td>  
    </tr> 

    </tbody> 
    </table> 

    <p><a class="button km-admin-button km-add-image" href="#">Add Image</a></p> 

</li> 
<li>...second li with the same code...</li> 
</ul> 

JSコード：

$('.km-add-image').on('click', function(e) { 
    e.preventDefault(); 
    var row = $(this).parents('li.menu-item').find('.km-admin-table-repeated-field .km-empty-row.screen-reader-text').clone(true); 
    row.removeClass('km-empty-row screen-reader-text'); 
    row.insertBefore('.km-admin-table-repeated-field tbody>tr:last'); 
    return false; 
}); 

JsFiddle：https://jsfiddle.net/kiarashi/31m9xLcr/

何が起こることは、私が最初にli内add imageボタンをクリックしたときにということで、空のtrが2番目のliの内側に追加されます。

ご協力いただきまして誠にありがとうございます。

Answer 1

あなたはほとんどあります。この場合、新しい<tr> html要素を挿入する場合は、少し変更する必要があります。上記のコードから与えられた

これはあなたの指定した[表]に[新しいテーブルの行を挿入]のための点で私の提案コードです

$('.km-add-image').on('click', function(e) { 
    e.preventDefault(); 

    // 1) Call the parent table's tbody 
    var oMenuItem = $(this).parents('li.menu-item').find('.km-admin-table-repeated-field tbody'); 

    // 2) Then call the <tr> tag that have the 'km-meta-box-row' class 
    // then clone it 
    var row = oMenuItem.find('.km-meta-box-row').clone(true); 
    row.removeClass('km-empty-row screen-reader-text'); 

    // 3) Then instead of 'inserting the new clone <tr>' before the last 
    // empty row, We can append it inside the parent's tbody like this 
    oMenuItem.append('<tr class="km-meta-box-row">' + row.html() + '</tr>'); 
    return false; 

}); 

は、ここで期待される結果を得るためにjsfiddleです。これがあなたをうまく導いてくれることを願っています：https://jsfiddle.net/pdtxrmpt/2/