Question

我使用ejs模板循环遍历数组并向表中添加行。以下是我的模板中的以下代码：

<div class="col-md-8 col-md-offset-2">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>
          Title
        </th>
        <th>
          Creator
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="createNewBoard">
        <th scope="row">
          Add New
        </th>
        <td>
          +
        </td>
      </tr>
      <% boards.forEach(function(board) { %>
        <a href="/<%= board._id %>">
          <tr>
            <th scope="row">
              <%= board.title %>
            </th>
            <td>
              <%= board.creator %>
            </td>
          </tr>
        </a>
      <% }) %>
    </tbody>
  </table>
</div>

以下是制作的内容：

<div class="col-md-8 col-md-offset-2">
  <a href="/584654b4c834f13ea05cf831"></a>
  <a href="/5846563e97b6133f6832568d"></a>
  <table class="table table-hover">
    <thead>
      <tr>
        <th>
          Title
        </th>
        <th>
          Creator
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="createNewBoard">
        <th scope="row">
          Add New
        </th>
        <td>
          +
        </td>
      </tr>
        <tr>
            <th scope="row">
              Yooo
            </th>
            <td>
              gus.henry@me.com
            </td>
          </tr>
        <tr>
            <th scope="row">
              Swag
            </th>
            <td>
              gus.henry@me.com
            </td>
          </tr>
    </tbody>
  </table>
</div>

为什么将锚标记放在顶部而不是表格行？除了ejs，使用bootstrap。

感谢。

Answer 1

这与在兼容浏览器（即chrome）中解析表的方式有关。

您的<a>标记应位于<td></td>内，才能成为有效的HTML，而对于其中一个标记，Chrome会在呈现网页时将其移出<tbody>。因为ejs是由服务器解释的，所以浏览器永远不会看到任何ejs <% %>的东西 - 所以在输出页面上做一个“查看源代码”，你会看到<a>标记你期望它们的位置是。

您似乎试图点击表格行导航到/[board id]页面。你可以改为做这样的事情：

<% boards.forEach(function(board) { %>
      <tr onclick="javascript:window.location='/<%= board._id %>';">
        <th scope="row">
          <%= board.title %>
        </th>
        <td>
          <%= board.creator %>
        </td>
      </tr>
<% }) %>

或者，如果你真的想要一个非JavaScript的解决方案，你可以在每个<a>和<td>中绝对定位<th>标签（因此它覆盖了单元格），如下所示：< / p>

<% boards.forEach(function(board) { %>
      <tr>
        <th scope="row">
          <%= board.title %>
          <a class="coveringA" href="/<%= board._id %>"></a>
        </th>
        <td>
          <%= board.creator %>
          <a class="coveringA" href="/<%= board._id %>"></a>
        </td>
      </tr>
<% }) %>

附带css如下：

table td { 
      overflow:hidden;
}

.coveringA { 
      position:absolute; 
      display:block;
      top:0px; 
      left:0px; 
      right:0px; 
      bottom:0px;
      background:rgba(0,0,0,0); /* sets an invisible background to ensure its clickable in IE9 */
}

ejs模板将事情排除在外

1 个答案: