javascript - 如何在 ruby​​ on rails 中使用复选框来选择行？

Question

这是Units表格：

<div id="table_header">Units</div>
<table class="gridView location">
  <tr class="gridViewHeader">
  <th><%= check_box("select", "all", {class: 'location'}) %></th>
  <th>Location Code</th>
  <th>Location Reference</th>
  <th>Address</th>
  </tr>

  <tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %> current_location">
    <td><%= check_box("select", "all", {class: 'current_location'}) %></td>
    <td><%= current_location_id %></td>
    <td><%= current_location.Lo_Reference %></td>
    <td><%= current_location %></td>
  </tr>
</table>

这是Selected Units表格：

<div id="table_header">Selected Units</div>
<table class="gridView location">
  <tr class="gridViewHeader">
  <th><%= check_box("select", "all", {class: 'location'}) %></th>
  <th>Location Code</th>
  <th>Location Reference</th>
  <th>Address</th>
  </tr>

  <tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %> current_location">
    <td><%= check_box("select", "all", {class: 'current_location'}) %></td>
    <td><%= current_location_id %></td>
    <td><%= current_location.Lo_Reference %></td>
    <td><%= current_location %></td>
  </tr>
</table>

button要推送的图像

<%= image_tag("blue_right_arrow.png", id: 'blue_right_arrow', :alt => "arro", title: 'Move to Selected Units') %>

通过单击此按钮，表格button中的选定行Units应传输到Selected Units表格中。

提前致谢！。

Answer 1

修改后的标记

<div class="table_header">Units</div>
<table class="gridView location" id="units">
  <thead>
    <tr class="gridViewHeader">
      <th><%= check_box("select", "all", {:class => "location"}) %></th>
      <th>Location Code</th>
      <th>Location Reference</th>
      <th>Address</th>
    </tr>
  </thead>

  <tbody>
    <tr class="current_location">
      <td><%= check_box("select", "all", {:class => "current_location"}) %></td>
      <td><%= current_location_id %></td>
      <td><%= current_location.Lo_Reference %></td>
      <td><%= current_location %></td>
    </tr>
  </tbody>
</table>


<div class="table_header">Selected Units</div>
<table class="gridView" id="selected_units">
  <thead>
    <tr class="gridViewHeader">
      <th><%= check_box("select", "all") %></th>
      <th>Location Code</th>
      <th>Location Reference</th>
      <th>Address</th>
    </tr>
  </thead>

  <tbody> 
    <tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %>">
      <td><%= check_box("select", "all") %></td>
      <td><%= current_location_id %></td>
      <td><%= current_location.Lo_Reference %></td>
      <td><%= current_location %></td>
    </tr>
  </tbody>
</table>

<%= image_tag("blue_right_arrow.png", id: 'blue_right_arrow', :alt => "arro", title: 'Move to Selected Units') %>

记下添加的新类。

jQuery代码

$(document).ready(function() {
  #copying the tr
  $("#blue_right_arrow").click(function() {
    $("input.current_location").each(function(i, el) {
      if($(el).is(":checked")) {
        $("table#selected_units tbody").append($(el).parent().parent().html());
        $(el).remove()
      }
    });
  });
});