Dimitri de Ruiter Dimitri de Ruiter - 1 year ago 217
Javascript Question

Rails - expand table row on click of link_to

in my app that I am building to learn rails and js, I have this case re. to expanding a table row to show a partial. to help understand, see this image:

enter image description here

The CSS for edit-tag can set to display "none"; this is the table:

<table id="tags" class="table table-hover" style="background-color: white; word-wrap: break-word; font-size: 0.9em;" >
<th>Tagged content</th>
<% object.tags.each do |tag| %>
<% unless tag.content.blank? %>
<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>
<% end -%>
<% end -%>

I created this function in JS yet it uses 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'

So my issues are:

  • when creating a JS using an ID (like above) it will relate to all rows in the table. How to make it unique?

  • when clicking the link for another row (that is not expanded), the open rows need to be imploded/closed. How to do that?

  • may be I am taking a complete wrong approach. If so, let me know how i can make it easier/more simple?

Answer Source

This works (including show and hide other rows) generically:

$("td.show-tag").on("click", function(event) { 
  var tagId = $(this).data('tagid');


Code above uses display: block To use display: table-row (to span the row with one td across all columns) use .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");

Yet not yet in my rails view.


No need for own JS! Achievable with Bootstap's collapse.js applied to the table.

<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 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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download