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，我试图通过行循环并获得宽度。在这样做的同时，我可以捕获列的索引并访问tabletwo。但我不确定语法。

$(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

这是：

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

您可以检查第二个表格，并确保所有td { text-align: center; }属性都已正确应用。我添加了一条CSS规则：

td

它会将{{1}}的文本居中放在第二个表中，因为它首先居中。

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

2 个答案: