Proper way to use appendTo in jquery

2 Views

Am I using the jquery appendTo method correctly in the code below?

I am asking because it appears to displays correctly when I test it in jsfiddle but when I use the same code on my local server (in FF, IE and Chrome) it displays with elongated boxes:

Read More

enter image description here

enter image description here

enter image description here

enter image description here

I am assuming I am doing something wrong.
Thanks.

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

jquery 

$('#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;
}
Post Views: 2

Related posts

1 comment

  1. You have an error in this line: 

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

    You select the last cell in the table and clone it to every row. When you want to copy the column, you have to select last cells in all rows, then you have to iterate over the cloned cells. Finally, the method after is more elegant here… 

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

    To create an empty column use: 

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

Comments are closed.