Ruby on Rails / HTML表

Question

這是經過編輯的代碼：我嘗試使用“名稱”而不是“緯度”，但仍然出現空白警報窗口。 我還在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

您應該包括JQuery庫以幫助您。 在您的layout.html.erb文件中，將此添加到<head> ：

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

jQuery具有基於索引docs選擇的eq函數。

還有一個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());
    });
  })
});

每次更改復選框時，它將貫穿所有這些操作。 性能不是最好的，但這應該可以幫助您入門。

Answer 2

以某種方式將一些數據-您的client.id（如果沒有添加）添加到復選框。 這會讓您的生活更輕松。 您可以通過幾種方法來做到這一點，但最簡單的方法是將其作為名稱的一部分：

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

要么

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

使用HTML5，您可以使用單獨的“數據客戶端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。 同樣，克里斯的代碼很扎實，所以我不會復制他所做的一切。 隨着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模板將數組放在一起。 無論如何，那應該給你很多東西。

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