javascript - 如何实现动态行跨度

Question

下面的代码是我最新的尝试。还有很多其他的:

Javascript:

...
    var issueArray = [];
    _.each(issueGroups, function(i) {
      var x = {
        issue: i[0].issue,
        comment: i[0].comment,
        count: i.length,
        new_row: 1
      };
      issueArray.push(x);
    });
    issueArray[0].new_row = 0;

    var x = {
      test: t[0].test,
      issues: issueArray,
      rowspan: issueArray.length
    };
    finalResult.push(x);
});

return finalResult;

这里需要注意的重要一点是，对于 finalResult 的每个元素，都有一个名为 issues 的数组，该数组有一个名为 new_row 的成员，其中对于除第一行之外的所有行都是如此。

模板:

...
<tbody>
  {{#each failuresByTest}}
    <tr>
      <td rowspan="{{rowspan}}">{{test}}</td>
      {{#each issues}}
        {{#if new_row}}
          </tr>
          <tr>
            <td><a href="https://www.bughost.com/browse/{{issue}}">{{issue}}</a></td>
            <td>{{comment}}</td>
            <td>{{count}}</td>
        {{else}}
            <td><a href="https://www.bughost.com/browse/{{issue}}">{{issue}}</a></td>
            <td>{{comment}}</td>
            <td>{{count}}</td>
        {{/if}}
      {{/each}}
    </tr>
  {{/each}}
</tbody>
...

我的数据是这样的:finalResult 的第一个元素有 3 个问题。我希望它看起来像这样:

  <tr>
    <td rowspan="3">Test1</td>
    <td>123</td>
    <td>Bug 1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>456</td>
    <td>Bug 2</td>
    <td>21</td>
  </tr>
  <tr>
    <td>654</td>
    <td>Bug 4</td>
    <td>3</td>
  </tr>

但最终看起来像这样:

  <tr>
    <td rowspan="3">Test1</td>
    <td>123</td>
    <td>Bug 1</td>
    <td>2</td>
  <td>
    <table>
       <tr>
          <td>456</td>
          <td>Bug 2</td>
          <td>21</td>
        </tr>
        <tr>
          <td>654</td>
          <td>Bug 4</td>
          <td>3</td>
        </tr>
      </table>
    </td>
  </tr>

但是 Meteor 不喜欢这样。我得到:

=> Errors prevented startup:

   While processing files with templating-compiler (for target web.browser):
   client/templates/runs/run_page.html:128: Unexpected HTML close tag
   </tr>   <tr>     <td><a h...

这严重偏离了我的方向，以至于我最终错误地放置了行标签来解决这个问题，然后它显示错误。我现在已经相应地编辑了问题，因为这是我真正的问题。

我该如何解决这个问题并说服 Meteor 事实上我比它更了解!

Answer 1

您的模板逻辑有缺陷:您正在尝试插入新的 <tr>里面 <td> 。自 <tr>只能包含在表格内，浏览器会自动在其周围添加表格，以便 html 有效。

<tbody>
  {{#each failuresByTest}}
    <tr>
      <td rowspan="{{rowspan}}">{{test}}</td>
      {{#each issues}}
        {{#if new_row}}
          <tr>
            <td>

因此，根据每个 failureBytest 的呈现方式，您应该为每个故障创建一个新表，或者在其单元格内的上一行之外创建一个新行。