jQuery获取单元格的表格宽度并将其分配给同一位置/索引的不同表格

Question

我已经开始学习jQuery，但是到目前为止语法很差。

我有两个表的如下： -

<table class="tableone"> 
    <thead> 
    <th width="30px">ID</th> 
    <th width="150px">NAME</th> 
    <th width="100px">Age</th> 
    </thead> 
</table> 
<table class="tabletwo"> 
    <tbody> 
    <td>1</td> 
    <td>John</td> 
    <td>32</td> 
    </tbody> 
</table> 

凡tableone具有在运行时一些动态的宽度。我需要获取列的宽度，并将其分配给tabletwo相同的列索引。

因此，该代码运行后是在HTML应该是这样的： -

<table class="tabletwo"> 
    <tbody> 
    <td width="30px">1</td> 
    <td width="150px">John</td> 
    <td width="100px">32</td> 
    </tbody> 
</table> 

我尝试使用jQuery一样，我试图环通行，并得到宽度。在这样做的时候，我可以捕获列的索引并访问表格2。但我不确定语法。

$(document).ready(function() { 
    /* looping into the th*/ 
    $("table.tableone thead").find('th').each(function(index,value) { 
    console.log(index); 
    console.log(value); 
    }) 
}); 

Answer 1

(function(){ 
    var temp=$("table.tabletwo td"); 
    $("table.tableone th").each(function(i,v) { 
     temp[i].width=v.width; 
    }); 
})(); 

Answer 2

这就是：

var firstTableWidth = []; 
 

 
$('.tableone th').each(function(i, item) { 
 
    firstTableWidth.push($(this).attr("width")); 
 
}) 
 

 
$('.tabletwo td').each(function(i, item) { 
 
    $(this).attr("width", firstTableWidth[i]); 
 
})

td { 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="tableone"> 
 
    <thead> 
 
    <th width="30px">ID</th> 
 
    <th width="150px">NAME</th> 
 
    <th width="100px">Age</th> 
 
    </thead> 
 
</table> 
 
<table class="tabletwo"> 
 
    <tbody> 
 
    <td>1</td> 
 
    <td>John</td> 
 
    <td>32</td> 
 
    </tbody> 
 
</table>

可以检查第二个表，并确保，所有width属性已正确应用。我已经添加了一个CSS规则：

td { 
    text-align: center; 
} 

它会在中央第二个表的td的文本，因为它集中在第一。