我在下面的代码中是否正确使用了 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/>
j查询
$('#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'/>")
关于jquery - 在 jquery 中使用 appendTo 的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33212875/