Column-specific selection in an HTML table in JS

Question

Column-specific selection in an HTML table in JS

Navigation

#1 by (2 votes)

1

Hello! I'm an IT student and I'm learning about Rails. I have the following HTML table of a view:

<p id="notice"><%= notice %></p>

<h1>Produtos</h1>

<table class="table table-hover custom" id="tabelaProduto">
  <thead>
    <tr>
      <th>id</th>
      <th>Nome</th>
      <th>Preco</th>
      <th>Descricao</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @produtos.each do |produto| %>
      <tr>
        <td><%= produto.id %></td>
        <td><%= produto.nome %></td>
        <td><%= produto.preco %></td>
        <td data-jtable><%= produto.descricao %></td>
        <td><%= link_to 'Show', produto %></td>
        <td><%= link_to 'Edit', edit_produto_path(produto) %></td>
        <td><%= link_to 'Destroy', produto, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>
<input type="button" id="botaosomar" value="OK" onclick="vamosSomar()" />

<br>

<%= link_to 'New Produto', new_produto_path %>

and the JS of this view:

$(document).ready(function(){
    $("#tabelaProduto tr").click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
        var value=$(this).find('td').find('preco').html();
        alert(value);
    });
    var tabela = document.getElementById("tabelaProduto");
});

This line of JS that is being my doubt: var value = $ (this) .find ('td') find ('price'). html ();

I need to click on a row of the table and select ONLY the value contained in the "price" field but I am confused about this "find" method.

javascript ruby-on-rails ruby

asked by anonymous 29.05.2017 / 21:21

1 answer

CSS - aligns images C - Structures for point, polygonal line and polygon

score 2 · Accepted Answer

As you are demonstrating this table today, you will only be able to retrieve the value of the price field by the index of element <td> in <tr> and this will only work, taking into account that you always have this element in the 3rd position (or , position you set in jquery, in case of index search).

When you write: var value=$(this).find('td').find('preco').html() even works, if: within the element: <td> , you have an element: <preco> . Which is not the case.

Without changing without a code, and taking into account that the price will always be in the 3rd position of the tr, you can write:

$("#tabelaProduto tr").click(function(){
   var value = $(this).find('td:nth-child(3)').html();
}

What he will do is to search for the 3 element td in the click.

link

But, more securely, you can change your html a bit:

<tbody>
    <% @produtos.each do |produto| %>
      <tr>
        <td><%= produto.id %></td>
        <td><%= produto.nome %></td>
        <td class='preco'><%= produto.preco %></td>
        <td data-jtable><%= produto.descricao %></td>
        <td><%= link_to 'Show', produto %></td>
        <td><%= link_to 'Edit', edit_produto_path(produto) %></td>
        <td><%= link_to 'Destroy', produto, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>

and your JS would look like this:

 $("#tabelaProduto tr").click(function(){
       var value = $(this).find('td.preco').html();
    }

Even if you add other <td> to your code, it will always search for <td class='preco'>

And, if you want to know more about find:

link