Javascript 如何实现动态rowspan_Javascript_Meteor

Javascript 如何实现动态rowspan

javascript meteor

Javascript 如何实现动态rowspan,javascript,meteor,Javascript,Meteor,下面的代码是我的最新尝试。还有许多其他情况： 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

下面的代码是我的最新尝试。还有许多其他情况：

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;

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

    var x = {
      issues: issueArray
    };
    finalResult.push(x);

这里需要注意的重要一点是，对于

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>
...

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

但结果是这样的：

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


测试1
123
错误1
2.
456
错误2
21
654
错误4
3.

然而，流星不喜欢这样。我得到：

=> 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...

=>阻止启动的错误：
使用模板编译器（针对目标web.browser）处理文件时：
client/templates/runs/run_page.html:128:意外的html关闭标记
您的模板逻辑有缺陷：
您正试图在
中插入新的
。由于
只能包含在表中，因此浏览器将自动在其周围添加一个表，以使html有效
<tbody>
  {{#each failuresByTest}}
    <tr>
      <td rowspan="{{rowspan}}">{{test}}</td>
      {{#each issues}}
        {{#if new_row}}
          <tr>
            <td>


{{{#每个故障字节测试}
{{test}}
{{{每个问题}
{{{如果是新行}

因此，根据每个failureBytest的呈现方式，您应该为每个故障创建一个新表，或者在其单元格中插入的前一行之外创建一个新行。您的模板逻辑有缺陷：
您正试图在
中插入新的
。由于
只能包含在表中，因此浏览器将自动在其周围添加一个表，以使html有效
<tbody>
  {{#each failuresByTest}}
    <tr>
      <td rowspan="{{rowspan}}">{{test}}</td>
      {{#each issues}}
        {{#if new_row}}
          <tr>
            <td>


{{{#每个故障字节测试}
{{test}}
{{{每个问题}
{{{如果是新行}

因此，根据每个failureBytest的呈现方式，您应该为每个故障创建一个新表，或者在其单元格内的前一行inseatd之外创建一个新行。
我用以下内容研究了Meteor的控制行为
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;

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

    var x = {
      issues: issueArray
    };
    finalResult.push(x);

请注意，测试名称和行范围现在已移动到第一个数组元素中。我可能可以删除新行

模板：
...
<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>
...

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


{{{#每个故障字节测试}
{{{每个问题}
{{{如果是新行}
{{test}}
{{/if}
{{comment}}
{{count}}
{{/每个}}
{{/每个}}

我真的不喜欢将“父数据”放在第一个数组元素中。我希望所有元素都是完全相同的类型/结构，没有添加重复的/额外的信息。
我用以下内容研究了Meteor的控制行为
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;

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

    var x = {
      issues: issueArray
    };
    finalResult.push(x);

请注意，测试名称和行范围现在已移动到第一个数组元素中。我可能可以删除新行

模板：
...
<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>
...

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


{{{#每个故障字节测试}
{{{每个问题}
{{{如果是新行}
{{test}}
{{/if}
{{comment}}
{{count}}
{{/每个}}
{{/每个}}

我真的不喜欢将“父数据”放在第一个数组元素中。我希望所有元素都是完全相同的类型/结构，不添加重复/额外的信息。
我得到了正确的答案。我想我有一次是对的，但后来弄错了。我遇到的一个问题是，当我正确使用它时，Meteor会抱怨HTML标记不匹配。这最终迫使我走上了错误的道路。我想我会编辑这个问题，以反映迫使我来到这里的真正问题。我得到了我的答案和错误的方法。我想我有一次是对的，但后来弄错了。我遇到的一个问题是，当我正确使用它时，Meteor会抱怨HTML标记不匹配。这最终迫使我走上了错误的道路。我想我将编辑这个问题，以反映迫使我来到这里的真正问题。