淘汰赛：带有表格列的 foreach 插入额外的 TR答案

【问题标题】：knockout:foreach with table columns inserts extra TR淘汰赛：带有表格列的 foreach 插入额外的 TR
【发布时间】：2017-06-16 21:16:11
【问题描述】：

jsfiddle 解释了这个问题。我想使用knockout:foreach 为表生成列标题列表（<th> 标签）。但是，如果您检查 DOM，您会看到在每个 <th> 周围插入了一个 <tr>，这导致列标题全部堆叠在最左边的列上方，而不是在相应的表格单元格上方显示一个列标题。

我以为containerless syntax 可能是我的朋友，但我在another jsfiddle 中尝试它，但它不起作用；如果您打开 javascript 控制台，您将看到无法找到关闭 foreach 循环的评论（还有其他关于此特定问题的 SO 问题，但他们的解决方案对我不起作用）。

【问题讨论】：

【解决方案1】：

您需要将 TH 元素包装在单个 TR 中，而不是让浏览器猜测放置它们的位置。

<thead>
  <tr data-bind="foreach:columns">
    <th data-bind="text: $data.field_name"></th>
  </tr>
</thead>

【讨论】：