jQuery td 单元格宽度始终为 0

Question

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

示例： 屏幕分为左右两段。右边的段有表格，但是这个段的宽度大于表格的宽度。所以我可以计算具有相同宽度值的每一列以显示具有相同列宽的表。

看起来像这样

  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 width=0 ??? 为什么会这样？

Answer 1

观察你的这部分代码：

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

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

所以解决方案是真正访问您的变量（在那里丢失$(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")，因为前者发现 ths 是 tr 的子代，而 ths 没有 tds 子代- 这是您稍后使用.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>