Rails如何在Javascript中获取表中每个对象的值？

Posted 2023-05-09

【中文标题】Rails如何在Javascript中获取表中每个对象的值？

【英文标题】：Rails how to Get value in Javascript of each object in table?

【发布时间】：2018-06-03 18:01:10

【问题描述】：

这是我的桌子：

<tbody>

<% @productos.each do |producto| %>
  <tr>
    <td><%= producto.codigo %></td>
    <td><%= producto.descripcion %></td>
    <td><%= producto.stock %></td>
   <td><%=  button_to '+', "#", method: :get,class: 'btn btn-info btn-sm btn_add' %></td>

  </tr>
<% end %>

</tbody>

点击按钮我想得到 |producto| 的值（每一行）在 javascript 中并发送到同一视图中的其他表或正确的方法是从 td 获取值？示例：

<td><%= producto.codigo %></td> //in this case how i get the value of this td?

使用 Javascript 或 Jquery。谢谢

【问题讨论】：

显示按钮点击处理程序

最好的方法是将所有必填字段作为data-*标签添加到每个<tr>

【参考方案1】：

首先在每个 td 中添加 id

<tbody>

<% @productos.each do |producto| %>
  <tr>
    <td id="code-<%= producto.codigo %>"><%= producto.codigo %></td>
    <td id="des-<%= producto.codigo %>"><%= producto.descripcion %></td>
    <td id="stock-<%= producto.codigo %>"><%= producto.stock %></td>
   <td><%=  button_to '+', "#", method: :get,class: 'btn btn-info btn-sm btn_add' %></td>
  </tr>
<% end %>

</tbody>

现在在你的按钮中添加一个属性data-id 像这样

<button class="btn btn-info btn-sm btn_add" data-id="<%= producto.codigo %>" type="button">Click</button>//I don't know about Rails so do this code in your language.

现在下面给出 jQuery...

<script>
    $(document).on('click','btn_add',function()
        id = $(this).data('id'); //get the clicked button's id
        var code = $('#code-'+id).html(); //get the code of that row
        var des = $('#des-'+id).html();  //get the description of that row
        var stock = $('#stock-'+id).html();  //get the stock of that row
        alert('Code - '+code+'<br> Description - '+des+'<br>Stock - '+stock);
    );
</script>

【参考方案2】：

1-在点击事件的js代码块中传递你想要的所有变量

<td><%=  button_to '+', "#", method: :get,class: 'btn btn-info btn-sm btn_add', :onclick => "get_current_producto(this, '<%=producto.codigo%>', '<%=producto.descripcion%>', '<%=producto.stock%>');"  %></td>

2- 在这里获取所有变量并

<script type="text/javascript>
        function get_current_producto(elm, codigo,descripcion, stock )
         //code goes here
         //console.log(codigo);
         alert(descripcion);
       ;
</script>

这里的elm 是调用点击事件的button 元素，您可以使用elm 获取该按钮元素的id 或类