Column-specific selection in an HTML table in JS

Question

Hi! 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 JS line being my doubt: var value=$(this). find('td'). find('preco'). html();

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

Answer 1

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

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

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

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

What it will do is to search, in the clicked tr, the 3 element td.

https://api.jquery.com/nth-child-selector/

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 others <td> in the midst of his code, he always goes <td class='preco'>

And if you want to know more about find:

https://api.jquery.com/find/