在jquery中使用appendTo的正确方法

我在下面的代码中正确使用 jquery appendTo方法吗？

我问,因为当我在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/>

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;
}

解决方法

您在此行中有错误：

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

您选择表中的最后一个单元格并将其克隆到每一行.如果要复制列,则必须选择所有行中的最后一个单元格,然后必须遍历克隆的单元格.最后,这里的方法在这里更优雅……

$(".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'/>")

在jquery中使用appendTo的正确方法

解决方法

猜你在找的jQuery相关文章