рельсы на ruby ​​do цикл не в правильном порядке, строки не в тд появляются вверху

Question

Я искал эту проблему и не смог найти ответ, поэтому решил, что я бы спросил.

У меня есть объект ActiveRecord, который зацикливается с помощью .each, чтобы создать таблицу со строкой для каждой записи. Теперь я пытаюсь поместить div в конец цикла, чтобы можно было добавить больше строк в каждую запись, используя JavaScript. Проблема в том, что если div не находится внутри тега (хотя он должен быть только внутри a), они все окажутся выше остальной части вывода цикла, например:

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

Тогда внизу, где должен был идти div, есть пустое место, но оно пустое

должно быть

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

Это мой взгляд, div, о котором я говорю, находится около дна.

Спасибо за любую помощь.

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