Ruby on Rails/HTML 表格答案

【问题标题】：Ruby on Rails/HTML tableRuby on Rails/HTML 表格
【发布时间】：2014-11-19 00:56:22
【问题描述】：

这是编辑后的代码：我尝试使用“名称”而不是“纬度”，但我仍然得到一个空白的警报窗口。我还在 app/views/layouts/application.html.erb 的<head> 中添加了<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

    <% @clients.each do |client| %>
          <tr class = "client">
            <td class = "name"><%= client.name %></td>
            <td class = "phone"><%= client.phone %></td>
            <td class = "address"><%= client.address %></td>
            <td class = "pay"><%= client.pay %></td>
            <td class = "latitude"><%= client.latitude %></td>
            <td class = "longitude"><%= client.longitude %></td>
            <td><form><input class = "route" type="checkbox" name = "chkboxRoute"></form></td>
          </tr>
        <% end %>

<script>
$(function() {
  $(".client input.route").bind("change", function(element) {
    var clatitude = [];
    var clongitude = [];

    $(".client input.route:checked").each(function(element) {
      element = $(element);

      var clientLatitude = $(element).closest('.client').find('.latitude');
      clatitude.push(clientLatitude.text());

      var clientLongitude = $(element).closest('.client').find('.longitude');
      clongitude.push(clientLongitude.text());
    });
        window.alert(clatitude[0]);
  })
});
</script>

【问题讨论】：

你的</tr> 和<% end %> 没有倒退吗？你有 jQuery 吗？

标签： javascript html ruby-on-rails ruby checkbox

【解决方案1】：

您应该添加JQuery library 来帮助您。在您的 layout.html.erb 文件中，将其添加到 <head> 中：

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

JQuery 有eq 函数可以根据索引docs 进行选择。

还有一个 siblings 函数将返回嵌套在同一父元素中的节点（在本例中为 <tr>。您还可以包含一个选择器以进一步减少结果。

app/views/clients/index.erb 的示例摘录：

<% @clients.each do |client| %>
  <tr class="client">
    <td class="name"><%= client.name %></td>
    <td class="phone"><%= client.phone %></td>
    <td class="address"><%= client.address %></td>
    <td class="pay"><%= client.pay %></td>
    <td class="latitude"><%= client.latitude %></td>
    <td class="longitude"><%= client.longitude %></td>
    <td><form><input class="route" type="checkbox" name = "chkboxRoute"></form></td>
  </tr>
<% end %>

还有 Javascript：

// $ is the jQuery global object
// Passing it a function will wait to execute that code until
// the entire HTML document is ready
$(function() {
  // Select every input with the "route" class that is checked
  var names = [];
  $(".client input.route:checked").each(function(index, element) {
    // Wrap the element in jQuery so we get access to all of its functions
    element = $(element);

    // Find the closest element with class "client",
    // then find an element nested inside of it with class "name"
    var clientName = $(element).closest('.client').find('.name');

    // Add the text from that element to the array
    names.push(clientName.text());
  });

  // At this point, names will hold all of the names of the clients
  // with a checked route input
});

请注意，这只会在页面加载时运行。如果您希望它在这些更改之一的任何时候运行，您可以将该函数绑定到 change 事件：

$(function() {
  $(".client input.route:checked").bind("change", function(element) {
    var names = [];
    $(".client input.route:checked").each(function(element) {
      element = $(element);
      var clientName = $(element).closest('.client').find('.name');
      names.push(clientName.text());
    });
  })
});

每次更改复选框时，这将贯穿所有这些。不是最好的性能，但这应该可以帮助您入门。

【讨论】：

我可能会使用 $(element).closest('.client').find('.name') 来减少对特定 HTML 的依赖，但这只是吹毛求疵。
我想我已经设法让它工作了，但我想通过在第一个 }) 之后添加一个 window.alert(names[0]) 来测试它；但我得到的只是一个空白窗口。非常感谢您的帮助。
你能在element = $(element) 之后console.log(element.closest(".client").html()) 吗？或者用您的 HTML 更新您的问题

【解决方案2】：

添加一些数据——如果没有别的，你的 client.id，以某种方式添加到复选框中。它会让你的生活更轻松。您可以通过多种方式做到这一点，但最简单的是作为名称的一部分：

<input type="checkbox" name = "chkboxRoute_<%= client.id %>">

或

<input type="checkbox" name = "chkboxRoute[]" value="<%= client.id %>">

使用 HTML5，您可以使用单独的“data-client-id”属性或类似的属性。

您想从 javascript 访问数据还是返回 Rails 访问数据？如果您想要名称或其他内容，只需将其粘贴在复选框的值或其他属性中即可。

“”的东西是多余的，特别是如果您只想通过 javascript 访问它。

根据以下评论进行修订：

我会这样修改 html：

<% @clients.each do |client| %>
  <tr class="client">
    <td class="client_<%= client.id %> name"><%= client.name %></td>
    <td class="client_<%= client.id %>phone"><%= client.phone %></td>
    <td class="client_<%= client.id %>address"><%= client.address %></td>
    <td class="client_<%= client.id %>pay"><%= client.pay %></td>
    <td class="client_<%= client.id %>latitude"><%= client.latitude %></td>
    <td class="client_<%= client.id %>longitude"><%= client.longitude %></td>
    <td><input class="route" type="checkbox" name = "chkboxRoute" value="client_<%= client.id %>"></td>
  </tr>
<% end %>

这会使您的 html 更复杂一些，但 javascript 会被简化。再一次，Chris 的代码是可靠的，所以我不会复制他所做的一切。随着 html 的改变，你可以直接获取你想要的值：

$(".client input.route:checked").each(function(element) {
  var client_class = $(element).val();
  var client_name = $("." + client_class + " name").text();
  var client_phone = $("." + client_class + " phone").text();
  ...
});

我只是喜欢这样做，因为它不太依赖 html 的结构。

现在，如果你真的想获得金牌，我会这样做：

<% @clients.each do |client| %>
  <tr class="client">
    <td><%= client.name %></td>
    <td><%= client.phone %></td>
    <td><%= client.address %></td>
    <td><%= client.pay %></td>
    <td><%= client.latitude %></td>
    <td><%= client.longitude %></td>
    <td><input class="route" type="checkbox" name = "chkboxRoute" value="<%= client.id %>"></td>
  </tr>
<% end %>

<script type="text/javascript">
  var clients = [];
  <% @clients.each do |client| %>
    clients[<%= client.id %>] = {
      name: "<%= j(client.name) %>",
      phone: "<%= j(client.phone) %>",
      ....
    };
  <% end %>
</script>

那么，获取值就是这样一个问题：

$(".client input.route:checked").each(function() {
  var client_id = parseInt($(this).val());
  var client_name = clients[client_id].name;
  var client_phone = clients[client_id].phone;
  ...
});

如果您愿意，您甚至可以使用 json 模板将数组放在一起。无论如何，这应该让你有足够的时间去咀嚼。

【讨论】：

感谢您的回复。我想从 Javascript 访问数据。按照你说的做，我怎么能访问每个客户的信息（姓名、电话等）？
如果您想通过 javascript 访问所有这些内容，那么 Chris 的回答可能就是您要走的路线 - 他的回答是正确的。我将修改我的答案以展示我将如何做到这一点。
我试过你的答案，它可以正常工作到 var client_id = parseInt($(element).val());我添加了一个 window.alert(client_id) ，我得到了一个 NaN :/
更新：通过用这个替换元素来让它工作。非常感谢！