다른 사용 JQuery와 여기

Question

첫 번째 테이블 내 코드에 하나 개의 테이블에서 HTML 테이블 행의 콘텐츠를 복사하는 방법 :

<table class="table table-condensed table-striped table-hover" id="schedules"> 
    <thead> 
     <th>Schedule Code</th> 
     <th>Subject Description</th> 
     <th>Room</th> 
     <th>Day</th> 
     <th>Time</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <button> Copy </button> 
     </tr> 
     <tr> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <button> Copy </button> 
     </tr> 
     <tr> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <button> Copy </button> 
     </tr> 
     <tr> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <td>*content here*</td> 
      <button> Copy </button> 
     </tr> 
    </tbody> 
</table> 

두 번째 테이블 :

<table class="table table-condensed table-striped table-hover" id="my_schedules"> 
    <thead> 
     <th>Schedule Code</th> 
     <th>Subject Description</th> 
     <th>Room</th> 
     <th>Day</th> 
     <th>Time</th> 
    </thead> 

</table> 

내 jQuery 코드 :

가

첫 번째 테이블의 전체 내용을 두 번째 테이블로 복사합니다. 내가 원하는 것은 복사 버튼을 클릭하면 특정 행만 두 번째 테이블에 복사됩니다.

Answer 1

이 시도 :

$('#my_schedules').append(cloneRow); 

Answer 2

이 문서가 문제를 해결하는 것입니다. 특정 rowclick 행에 두 번째 테이블로 복사.

$(document).ready(function() { 
     var rows = $("#schedules tr:not(:first)"), 
      copyTable = $('#my_schedules'); 

     rows.click(function() { 
      var row = $(this), 
      cloneRow = row.clone(); 
      copyTable.append(cloneRow); 
      row.hide(); 
     }); 
    }); 

Answer 3

이게 내가 원하는 것인가? fiddle을 만들었습니다.

두 개를 변경했는데 버튼이 아무 곳에도없는 것처럼 보였으므로 td에 추가했습니다. 또한 쉽게 선택할 수 있도록 버튼에 class을 추가했습니다.

$(document).ready(function() { 
    $(".use-button").click(function() { 
    var html = $(this).closest("tr") 
       .clone().find('td:last') 
       .remove().end().prop('outerHTML'); 

    var $schedules = $("#my_schedules") 
    $schedules.append(html); 
    }); 
}); 

편집 기본 테이블을 동적으로로드 버튼을 클릭해야지고 경우 on()를 사용하여 바인딩 "delegated"를 만들어야합니다.

$('.use-button').on('click', function() { 
    var html = $(this).closest("tr") 
       .clone().find('td:last') 
       .remove().end().prop('outerHTML'); 
    $("#my_schedules").append(html); 
}); 

Answer 4

위의 구조 중 일부를 변경했습니다.

$(document).ready(function(){ 
 
var rows = $("#schedules"), 
 
copyTable = $('#my_schedules'); 
 
/* 
 
    rows.click(function(){ 
 
     var row = $(this), 
 
     cloneRow = row.clone(); 
 
     copyTable.append(cloneRow); 
 
     row.prevAll().hide(); 
 
    }); 
 
*/ 
 
$('button').click(function(){ 
 
    var buttonClass = $(this).attr("class"); 
 
    var row = $("#"+buttonClass).clone(); 
 
    $('#my_schedules').children('tbody').append(row); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-condensed table-striped table-hover" id="schedules"> 
 
    <thead> 
 
    <th>Schedule Code</th> 
 
    <th>Subject Description</th> 
 
    <th>Room</th> 
 
    <th>Day</th> 
 
    <th>Time</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr id="1"> 
 
     <td>*1*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <button class="1"> Copy </button> 
 
    </tr> 
 
    <tr id="2"> 
 
     <td>*2*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <button class="2"> Copy </button> 
 
    </tr> 
 
    <tr id="3"> 
 
     <td>*3*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <button class="3"> Copy </button> 
 
    </tr> 
 
    <tr id="4"> 
 
     <td>*4*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <td>*content here*</td> 
 
     <button class="4"> Copy </button> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<table class="table table-condensed table-striped table-hover" id="my_schedules"> 
 
    <thead> 
 
    <th>Schedule Code</th> 
 
    <th>Subject Description</th> 
 
    <th>Room</th> 
 
    <th>Day</th> 
 
    <th>Time</th> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

나는이 문제를 해결하겠습니다.