Rails - 单击 link_to 展开表格行

Question

在我正在构建以学习 Rails 和 js 的应用程序中，我有这个案例。 扩展表格行以显示部分。 为了帮助理解，请看这张图片：

edit-tag的 CSS 可以设置为显示“none”； 这是表：

<table id="tags" class="table table-hover" style="background-color: white; word-wrap: break-word; font-size: 0.9em;" >
<thead>
    <tr>
        <th>Tagged content</th>
        <th>as</th>
        <th>in</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <% object.tags.each do |tag| %>
        <% unless tag.content.blank? %>
        <tr>
            <td style="word-wrap: break-word;"><%= link_to tag.content, [object, tag], method: :patch %></td>
            <td><%= tag.tagtype.name %></td>
            <td><%= tag.tagtype.typeoftag %></td>
            <td><%= link_to '', [object, tag], method: :delete, data: { confirm: 'Please confirm deletion!' }, :class => "glyphicon glyphicon-trash" %></td>
        <tr id='edit-tag'>
            <td colspan="5"><%= render 'tags/tag_update' %></td>
        </tr>
        </tr>
        <% end -%>
    <% end -%>
</tbody>

我在 JS 中创建了这个函数，但它使用了 ID

$(function()  {
var DisplayTagEdit = document.getElementById('DisplayTagEdit');
DisplayTagEdit.onclick = function() {
    var edittag = document.getElementById('edit-tag');
    if (edittag.style.display !== 'none') {
        edittag.style.display = 'none';
    }
    else {
        edittag.style.display = 'block'
    }
}
});

所以我的问题是：

• 使用 ID（如上）创建 JS 时，它将与表中的所有行相关。 如何让它独一无二？
• 单击另一行（未展开）的链接时，需要内爆/关闭打开的行。 怎么做？
• 可能是我采取了完全错误的方法。 如果是这样，让我知道如何让它更容易/更简单？

Answer 1

使用与 object'id 相关的唯一数据属性或类来标识它们，例如：

       <tr data-tag-id='<%= tag.id >' class='show-tag'>
            <td style="word-wrap: break-word;"><%= link_to tag.content, [object, tag], method: :patch %></td>
            <td><%= tag.tagtype.name %></td>
            <td><%= tag.tagtype.typeoftag %></td>
            <td><%= link_to '', [object, tag], method: :delete, data: { confirm: 'Please confirm deletion!' }, :class => "glyphicon glyphicon-trash" %></td>
        </tr>
        <tr data-tag-id='<%= tag.id %>' class='edit-tag'>
            <td colspan="5"><%= render 'tags/tag_update' %></td>
        </tr>

在 js 中（我在这里使用 Jquery）：

  $(".edit-tag").on("click", function(event) {
     var tagId = $(this).data("tagId");
     var $showRow = $("tr.show-tag[data-tag-id=" + tagId + "]"); // here you get the references of the row you need.
     // do want you want ................
     $showRow.toggle();
  });

而在 Rails 中，我们有“conteng_tag_for”，它将 id 信息添加到 dom 元素。

<%= content_tag_for :tr, tag do %>
     <td style="word-wrap: break-word;"><%= link_to tag.content, [object, tag], method: :patch %></td>
     <td><%= tag.tagtype.name %></td>
     <td><%= tag.tagtype.typeoftag %></td>
     <td><%= link_to '', [object, tag], method: :delete, data: { confirm: 'Please confirm deletion!' }, :class => "glyphicon glyphicon-trash" %></td>
 <% end %>

将生成 html 如下：

<tr id='tags_16' class='tags'> <!-- assume tag'id is 16 -->
   <td>......</td>
   <td>......</td>
   <td>......</td>
   <td>......</td>
</tr>

Answer 2

这通常有效（包括显示和隐藏其他行）：

$("td.show-tag").on("click", function(event) { 
  var tagId = $(this).data('tagid');
  $('tr.edit-tag').not($('tr.edit-tag[data-tagid='+tagId+']')).hide();
  $('tr.edit-tag[data-tagid='+tagId+']').toggle();
});

更新

上面的代码使用 display: block 要使用 display: table-row（跨所有列跨越一个 td 的行）使用 .css()

$("#tags td.show-tag").on("click", function(event) { 
  var tagId = $(this).data('tagid');
  $('tr.edit-tag').not($('tr.edit-tag[data-tagid='+tagId+']')).css("display", "none");
  $('tr.edit-tag[data-tagid='+tagId+']').css("display", "table-row");
});

但在我的 Rails 视图中还没有。

编辑

不需要自己的JS！ 可以通过将 Bootstap 的collapse.js应用于表格来实现。

<tr id='heading<%= tag.id %>', role="button", data-toggle="collapse", data-parent="tags", class='show-tag', href="#collapse<%= tag.id %>", aria-expanded="true" aria-controls="collapse<%= tag.id %>">
    <td style="word-wrap: break-word;"><%= tag.content %></td>
    <td><%= tag.tagtype.name %></td>
    <td><%= tag.tagtype.typeoftag %></td>
    <td class="delete-btn"><%= link_to '', [object, tag], method: :delete, data: { confirm: 'Please confirm!' }, :class => "glyphicon glyphicon-trash" %></td>
</tr>
<tr id='collapse<%= tag.id %>', class='collapse' aria-labelledby="collapse"<%= tag.id %>">
    <td colspan="4"><%= render 'shared/tester' %><%#= render partial: 'tags/update', object: @tag.tagable, tag: @tag %></td>
</tr>