Ruby on Rails/HTML table

Ruby on Rails/HTML table

本文关键字：HTML table Rails on Ruby      更新时间：2023-09-26

这是编辑后的代码：我尝试使用"名称"而不是"纬度"，但仍然收到一个空白的警报窗口。我还在应用程序/视图/布局/应用程序.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>

你应该包括 JQuery 库来帮助你。在layout.html.erb文件中，将其添加到<head>中：

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

JQuery 具有根据索引文档进行选择的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());
    });
  })
});

每次更改复选框时，这将贯穿所有这些复选框。不是最好的性能，但这应该让你开始。

以某种方式将一些数据（如果没有别的，则为您的 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 模板将数组放在一起。 无论如何，这应该给你很多可以咀嚼的东西。

相关文章：