Richtige Art, appendTo in jquery zu verwenden

Verwende ich die jquery appendTo-Methode im folgenden Code richtig?

Ich frage, weil es beim Testen korrekt angezeigt wird jsfiddle aber wenn ich denselben Code auf meinem lokalen Server (in FF, IE und Chrome) verwende, wird er mit länglichen Kästchen angezeigt:

Ich gehe davon aus, dass ich etwas falsch mache. Vielen Dank.

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/>

Abfrage

$('#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;
}

Sie haben einen Fehler in dieser Zeile:

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

Sie wählen die letzte Zelle in der Tabelle aus und klonen sie in jede Zeile. Wenn Sie die Spalte kopieren möchten, müssen Sie die letzten Zellen in allen Zeilen auswählen und dann über die geklonten Zellen iterieren. Endlich die Methode after ist hier eleganter…

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

Um eine leere Spalte zu erstellen, verwenden Sie:

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