Ruby on Rails / HTML表

Question

This is the edited code: I tried with 'name' instead of 'latitude', and I still get a blank alert window. 这是经过编辑的代码：我尝试使用“名称”而不是“纬度”，但仍然出现空白警报窗口。 I also added <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> inside the <head> in app/views/layouts/application.html.erb 我还在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>

Answer 1

You should include the JQuery library to help you out. 您应该包括JQuery库以帮助您。 In your layout.html.erb file, add this inside the <head> : 在您的layout.html.erb文件中，将此添加到<head> ：

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

JQuery has the eq function to select based on index docs . jQuery具有基于索引docs选择的eq函数。

There is also the siblings function that will return the nodes nested within the same parent element (in this case <tr> . You can also include a selector to further pare down results. 还有一个siblings函数将返回嵌套在同一父元素内的节点（在本例中为<tr> 。您还可以包括选择器以进一步缩减结果。

Example excerpt from app/views/clients/index.erb: 来自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 %>

And the Javascript: 和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
});

Note that this will only run at the time the page loads. 请注意，这只会在页面加载时运行。 If you want it to run any time one of those changes, you can bind the function to the change event: 如果您希望它在这些更改之一中的任何时间运行，则可以将该函数绑定到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());
    });
  })
});

This will run through all of them every time a checkbox is changed. 每次更改复选框时，它将贯穿所有这些操作。 Not the best for performance, but that should get you started. 性能不是最好的，但这应该可以帮助您入门。

Answer 2

Add some data - your client.id if nothing else, to the checkbox in some way. 以某种方式将一些数据-您的client.id（如果没有添加）添加到复选框。 It'll make your life easier. 这会让您的生活更轻松。 You can do that in a couple of ways, but the easiest is as part of the name: 您可以通过几种方法来做到这一点，但最简单的方法是将其作为名称的一部分：

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

or 要么

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

With HTML5 you can use a separate "data-client-id" attribute or something like that. 使用HTML5，您可以使用单独的“数据客户端ID”属性或类似属性。

Do you want to access the data from javascript or back in Rails? 您要从javascript还是在Rails中访问数据？ If you want the name or something else just stick it in the value or other attribute of the checkbox. 如果您想要名称或其他名称，只需将其粘贴在复选框的值或其他属性中即可。

The "" stuff is extraneous, particularly if you want to just access this via javascript. “”东西是多余的，特别是如果您只想通过javascript访问它。

Revision based on comment below: 根据以下评论进行修订：

I would modify the html as such: 我会这样修改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 %>

That makes your html a little more complex but the javascript is then simplified. 这会使您的html稍微复杂一些，但随后简化了javascript。 Again, Chris code is solid so I won't replicate everything he's done. 同样，克里斯的代码很扎实，所以我不会复制他所做的一切。 With the html changed thusly you can directly grab the values that you want: 随着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();
  ...
});

I just like doing something like that because it doesn't rely so much on the structure of the html. 我喜欢做这样的事情，因为它并不太依赖html的结构。

Now, if you want to really go for the gold here's the way I would do it: 现在，如果您想真正获得金牌，这就是我的方法：

<% @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>

Then, getting the values is simply a matter of this: 然后，获取值只是以下问题：

$(".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;
  ...
});

You can even use a json template to put the array together if you like. 如果愿意，您甚至可以使用json模板将数组放在一起。 Anyway, that should give you plenty to chew on. 无论如何，那应该给你很多东西。

Ruby on Rails / HTML表

问题描述

2 个解决方案

解决方案1
2 2014-11-16 07:46:28

解决方案2
1 已采纳 2014-11-16 21:05:35

Ruby on Rails / HTML表

问题描述

2 个解决方案

解决方案1 2 2014-11-16 07:46:28

解决方案2 1 已采纳 2014-11-16 21:05:35

解决方案1
2 2014-11-16 07:46:28

解决方案2
1 已采纳 2014-11-16 21:05:35