javascript - 帕格表值未放入正确的列中

我有一个想要显示的简单表格，但是显示似乎有些偏离。我希望每个法院的signCount变量都在“ Sign Count”列下，但由于某种原因，它出现在每个法院名称下的“ Court Name”列下。似乎每个循环都有些混乱...谢谢！

courts，court.users和collections是看起来像这样的数组：

courts =
[ { orgName: 'Court 1',
    sortNumber: 9,
    level: 2,
    createdAt: 2018-02-12T09:09:15.920Z,
    lastModify: null,
    _id: 5a8159bb65314c0407b17533,
    users: [ [Object], [Object] ],
    parentID: 5a74292665314c0407b0ea2b,
    __v: 0 },
  { orgName: 'Court 2',
    sortNumber: 1,
    level: 3,
    createdAt: 2018-03-06T06:02:12.820Z,
    lastModify: null,
    _id: 5a9e2ee42b8baf66accc7b4a,
    users: [ [Object], [Object] ],
    parentID: 5a8159bb65314c0407b17533,
    __v: 0 },
  { orgName: 'Court 3',
    sortNumber: 7,
    level: 3,
    createdAt: 2018-03-06T06:45:05.439Z,
    lastModify: 2018-04-01T11:51:19.969Z,
    _id: 5a9e38f12b8baf66accc7bd4,
    users: [ [Object] ],
    parentID: 5a8159bb65314c0407b17533,
    __v: 0 }];;

courts.users = [{ userName: '1100zs',
  displayName: 'Court 1',
  phone: '',
  memo: '',
  mobilePhone: '',
  isMaster: true }
{ userName: '1100dd',
  displayName: 'Court 1.1',
  phone: '',
  memo: '',
  mobilePhone: '',
  isMaster: false }];

collections = [{courtName: '51zs', signCount: 15}, {courtName: '54zs', signCount: 7}, {courtName: '45zs', signCount: 8}];

extends layout

block content
  h1 Courts
    table(id="courts" align='center')
      tr
        th Court Name
        th Level
        th Display Name
        th Users
        th Sign Count
      each court in courts
        tr
          td #{court.orgName}
          td #{court.level}
          if court.users
            if court.users.length >= 1
              td #{court.users[0].displayName}
              td #{court.users[0].userName}
        each item in collections
          if court.users.length >= 1
            if item.courtName == court.users[0].userName
                td #{item.signCount}
            else
                td 0
    h2  #{signCount} / #{total}

html看起来像这样：（很抱歉格式不正确。由于我是在pug中编写的，因此必须手动缩进所有内容。）

<html>
    <head>
    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta http-equiv="x-ua-compatible" content="ie=edge">
    <link rel="stylesheet" href="/stylesheets/style.css">
    <title>Courts by region</title>
</head>
<body>
    <h1>Courts<table id="courts" align="center">
    <tbody>
        <tr>
            <th>Court Name</th>
            <th>Level</th>
            <th>Display Name</th>
            <th>Users</th>
            <th> Sign Count </th>
        </tr>
        <tr>
            <td>Court 1</td>
            <td>2</td>
            <td>Court User[0]  </td>
            <td>1100zs</td>
        </tr>
        <tr>
            <th>9</th> <!-- This number should go under Sign Count... -->
        </tr>
        <tr>
            <td>Court 2</td>
            <td>3</td>
            <td>Court User[0]  </td>
            <td>1101zs</td>
        </tr>
        <tr>
            <th>0</th>
        </tr>
        <tr>
            <th>0</th> <!-- This number should go under Sign Count... -->
        </tr>
    </tbody>
    </table>
</h1>

<h2> 9 / 207</h2>
        <footer>
            <hr><p> © 2019 </p>
        </footer>
    </body>
</html>

最佳答案

您只需要在集合行（及其子项）中每项缩进两个空格，以使它属于<tr>，而不是创建一个新项。

COURT

javascript - 帕格表值未放入正确的列中