Ruby上的轨道循环循环不正确，而不是TD中的线出现在顶部

Question

我已经搜索了这个问题，但无法找到答案，所以我想知道。

我有一个ActivereCord对象正在用.east do生成带有每个记录的行的表。现在，我试图将DIV放置在循环的底部，以便可以使用JavaScript在每个记录下添加更多的行。问题是，除非DIV在标签内部（虽然仅需要在A内部），否则它们最终都超过了环路的其余部分，例如：

<div>
</div>
<div>
</div>
<tr>
</tr>
<tr>
</tr>

然后在底部有一个空的，Div应该去的地方，但它是空的

应该是

<tr>
</tr>
<tr>
<div>
</div>
</tr>

这是我的观点，我指的是底部附近。

谢谢您的任何帮助。

            <div class="collapse" id=<%="searchExpand#{@count}"%> >
                <div class="card card-body">
                    Loading
                </div>
            </div>

<%= link_to 'Download CSV', "/collator/#{@file_name}" %>
<h1>In show, <%= @search_id %> status code <%= @status_code %> </h1>
<h4> <%= @used_keywords.any? ? "Searched previously: #{@used_keywords}" : " These words have been searched for #{@used_keywords}" %> </h4>
    <%= @keywords %>
<table class="table">
    <thead>
        <tr>
            <th scope="col">Keyword</th>
        <!--    <th scope="col">Title</th> -->
            <th scope="col">Shipper</th>
            <th scope="col">Cosignee</th>
            <th scope="col">Origin</th>
            <th scope="col">Destination</th>
            <th scope="col">Date</th>
            <th scope="col">Expand</th>
        </tr>
    </thead>
    <tbody>
        <%@count = 1; previous_keyword = "" %>
        <% @shipment_records.each do |shipment| %>
            <tr>
                <th scope="row"><a href=<%= "xxx/{shipment.url}" %> target ="_blank"><%="#{@count}" %> </a> </th>
                <td><%= shipment.shipper %></td>
                <td><a href=<%="https://www.google.com/search?q=#{CGI.escape(shipment.consignee)}"%> target="_blank"><%= shipment.consignee %></a></td>
                <td><%= shipment.origin %></td>
                <td><%= shipment.destination %></td>
                <td><%= shipment.date %></td>
                <td><button class="btn btn-primary" type="button" onclick="searchExpand(<%="'searchExpand#{@count}','#{shipment.consignee}'"%>);"data-toggle="collapse" data-target=<%="#searchExpand#{@count}"%> aria-expanded="false" aria-controls="searchExpand" >Deep Search</button></td>
                </tr>
                <tr>
                <div class="collapse" id=<%="searchExpand#{@count}"%> >
                    <div class="card card-body">
                        Loading
                    </div>
                </div>
                </tr>
            <% @count +=1 %>
        <% end %>

    </tbody>
</table>

Answer 1

<tr>的允许内容是：

零或更多<td>和/或<th>元素;还允许使用脚本支持元素（<script>和<template>）

因此：

这样的结构

<tr>
  <div>...</div>
</tr>

不是有效的html，浏览器会将其改写为有效，这就是为什么事情在您身上移动的原因。

解决方案是使用有效的HTML，更像：

<tr>
  <td colspan="7">
    <div class="collapse" id=<%="searchExpand#{@count}"%> >
      <div class="card card-body">
        Loading
      </div>
    </div>
  </td>
</tr>

然后调整您的JavaScript以正确处理新的<td>。