jQuery中使用appendTo的正确方式

Question

请问我在下面的代码中是否正确地使用了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;
}

- user1763812

---

代码看起来不错，似乎你可能受到了在示例中未显示的CSS元素的影响。 - Sean Phillips

谢谢回复。我没有其他我知道的CSS元素。有什么方法可以检查吗？ - user1763812

工作正常吗？http://jsfiddle.net/110ewzuk/ - Joakim M

我本以为nrodic一定能行。它更加简洁。但我仍然遇到了同样的问题。我会在上面发布代码生成的屏幕截图。似乎某种方式插入了<p></p>。感谢您的努力。 - user1763812

当然可以。这段代码只是选择最后一个 div 并将其添加到 p 后面。 - nrodic

Answer 1

今日免费次数已满, 请开通会员/明日再来

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

- Pavel Gatnar

---

优雅的选择器，确实如此。 - nrodic

@nrodic 谢谢，jQuery在这里可以让代码更加优雅。 - Pavel Gatnar