jquery에서 appendTo를 사용하는 올바른 방법

jquery에서 appendTo를 사용하는 올바른 방법

아래 코드에서 jquery append To 메서드를 올바르게 사용하고 있습니까?

jsfiddle로 테스트하면 올바르게 표시되는 것처럼 보이지만 로컬 서버(FF, IE 및 Chrome)에서 같은 코드를 사용하면 다음과 같은 박스와 함께 표시됩니다.

나는 내가 뭔가 잘못하고 있다고 추측하고 있다.감사해요.

HTML

<div class="ws-css-table"  >
  <div class="ws-css-table-tr">
        <div class="ws-css-table-td"></div>
        <div class="ws-css-table-td"></div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td"></div>
        <div class="ws-css-table-td"></div>
    </div>
    <div class="ws-css-table-tr">
        <div class="ws-css-table-td"></div>
        <div class="ws-css-table-td"></div>
    </div>    
</div>   

<br/>
<button id="css-icol">Col +</button><br/><br/>

쿼리

$('#css-icol').click(function(){
    $(".ws-css-table-td:last").clone().appendTo('.ws-css-table-tr');

  var tblArr = $('.ws-css-table > .ws-css-table-tr').map(function ()
   {
    return $(this).children().map(function ()
    {
        return $(this);
    });
});     

lastCol = $('.ws-css-table-tr:first > .ws-css-table-td').length;
 for (r=0; r<$('.ws-css-table-tr').length; r++)
    tblArr[r][lastCol-1].text('X');
 });    

css

.ws-css-table {
    display: table;
}
.ws-css-table-tr { 
    display: table-row;     
}
.ws-css-table-td { 
    display: table-cell;
    border:1px solid #000;
    width: 15px;
    height:15px;
    text-align:center;
  vertical-align:middle;
}

다음 행에 오류가 있습니다.

$(".ws-css-table-td:last").clone().appendTo('.ws-css-table-tr');

테이블의 마지막 셀을 선택하여 모든 행에 복제합니다.열을 복사할 때는 모든 행의 마지막 셀을 선택한 다음 복제된 셀을 반복해야 합니다.마지막으로 방법은after여기가 더 우아하고...

$(".ws-css-table-td:last-child")
  .each(function(){
    var $this=$(this)
    $this.after($this.clone())
  })

빈 열을 작성하려면 다음 명령을 사용합니다.

$(".ws-css-table-td:last-child")
  .after("<div class='ws-css-table-td'/>")

언급URL : https://stackoverflow.com/questions/33212875/proper-way-to-use-appendto-in-jquery