Jquery td 单元格宽度始终为 0

Question

我创建了这个表。此表应具有与整个表相同的列宽。如果单元格具有不同的值，则表的正态增长。但是我希望表格在给定的表格宽度内具有相同的列。

例：屏幕分为 2 个部分，左侧和右侧。右段包含表格，但此段的宽度大于表格宽度。所以我可以计算具有相同宽度值的每一列，以显示具有相同列宽的此表。

看起来像这样

  Posart   |   Datum    |
1234567890 | 1234567890 |
   1234    | 12.12.2019 |
<table  id="Auftragspositionen" class="standardliste" summary="">
<tr><th id="Posart">Posart</th><th id="Datum">Datum</th>
</tr>
<tr>
<td headers="Posart"><div class="left noborder">001.00<br/>Z <br/>Zeit</div></td>
<td headers="Datum"><div class="middle noborder">12.03.2018</div></td>
</tr></table>
And my jQuery select is this !
b2=$('#Auftragspositionen');
b2.find("tr th").children("td").each(function(i) {
        tdWidth = $(this).width();
        alert(i + 'td width is ' + $(this).tdWidth);
        });

我的问题是，每个单元格 td 宽度 = 0 ???为什么呢？

Answer 1

观察代码的这一部分：

tdWidth = $(this).width();                     // here you define the tdWidth variable
alert(i + 'td width is ' + $(this).tdWidth);

在第二行中，当您使用 $(this).tdWidth 时，您实际上尝试访问名为 tdWidth 的 jQuery 属性，而不是访问您刚刚创建的 tdWidth 变量，该属性不存在。

所以解决方案是真正访问你的变量(失去那里的$(this).(。此外，最好使用 var 在本地声明变量。

var tdWidth = $(this).width();         // using var here
alert(i + ' td width is ' + tdWidth);  // not $(this).tdWidth !

对于下面的演示，我也更改了选择器(从 b2.find("tr th") 到 b2.find("tr") ，因为前者找到th是 tr 的孩子，而th没有td的孩子 - 这就是您稍后使用 .children("td") 搜索的内容(：

b2 = $('#Auftragspositionen');
b2.find("tr").children("td").each(function(i) {
  var tdWidth = $(this).width();
  alert(i + ' td width is ' + tdWidth);
});

table, tr, th, td { border: 1px solid black; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="Auftragspositionen" class="standardliste" summary="">
  <tr>
    <th id="Posart">Posart</th>
    <th id="Datum">Datum</th>
  </tr>
  <tr>
    <td headers="Posart">
      <div class="left noborder">001.00<br/>Z <br/>Zeit</div>
    </td>
    <td headers="Datum">
      <div class="middle noborder">12.03.2018</div>
    </td>
  </tr>
</table>