Question

我有一个像：

<tr><td><select multiple="multiple"></select></td><td><input type="text" /></td><td><input type="button" value="Delete" class="delRow" /></td></tr>

克隆后，这两行将如下所示：

<tr><td width="162px"></td><td><input disabled="disabled" type="text" /></td><td width="62px"></td></tr>
<tr display="none"><td><select multiple="multiple"></select></td><td><input type="text" /></td><td><input type="button" value="Delete" class="delRow" /></td></tr>

我要在相同数量的字段上方插入一个新行，但我将删除select和button，我将隐藏原始行（暂时）。只有1个新行可见，并且没有这两个元素，结果是整个表的宽度变小。

我想我可以以某种方式遍历旧的$ tr jquery变量的tds并将它们的宽度复制到克隆。但我不确定究竟是怎么回事。这就是我正在做的事情：

$clone = $tr.clone();
$tr.children("td").each( function() {
    $(this).width(); // not sure how to set this.
}
$clone.find("input").prop("disabled",true); // disables the clone's "inputs"
$clone.find("select").remove(); // removes the "select".
$clone.find("input.delRow").remove(); // removes button from last td

我尝试了这个解决方案，但它导致克隆的第一个TD与整个原始TR具有相同的宽度：

$clone.children().width( function(i, val) {
    return $tr.eq(i).width();
});

HTML现在看起来像：

<tr><td width="640px"></td><td><input disabled="disabled" type="text" /></td><td></td></tr>
<tr display="none"><td><select multiple="multiple"></select></td><td><input type="text" /></td><td><input type="button" value="Delete" class="delRow" /></td></tr>

结论/解决方案：

我之前找到了获得宽度不正确的原因。我的代码在slideToggle函数内部。所以我的源TR已经折叠（隐藏），并且对于那些隐藏元素未定义宽度。我将Amin的代码放在slideToggle之外。然后我能够使用width变量使新的TR匹配原始TR的大小。

为：

tr.slideToggle(100, function(){     
    $clone = $tr.clone();                           
    $clone.children().each(function(index) {
        $(this).width($tr.children().eq(index).width()); // fails to set width of cloned td's because $tr is now collapsed
    });
}

好：

var width=[];
$tr.children().each(function(index) {
    width[index]=$(this).width(); // correctly sets width array values
}

tr.slideToggle(100, function(){     
    $clone = $tr.clone();                           
    $clone.children().each(function(index) {
        $(this).width(width[index]); // Correctly sets width of cloned td's because $tr's td values were saved to var width before the tr was collapsed by slideToggle
    });
}

Answer 1

假设$tr包含具有所需td宽度的tr并且$clone是克隆的tr，这里是如何获得它们的tds宽度并将它们应用于新的tds：

var width=[];
$tr.find('td').each(function(index){
    width[index]=$(this).width();
});
$clone.find('td').each(function(index){
    $(this).width(width[index]);
});

Jquery复制TD宽度从1 TR到另一个

1 个答案: