Question

表格

<tbody id="batch_view" class = "a-checkbox">

<% @batches.each do |batch| %>
  <tr>
    <td class="<%= batch.id %>"><%= batch.date.strftime("%Y-%m-%d") if !batch.date.nil? %></td>
    <td><%= batch.purchase_center.name.to_s  if !batch.purchase_center.nil? %></td>
    <td><%= batch.plant.name.to_s if !batch.plant.nil?%></td>
    <td><%= batch.species.name.to_s if !batch.species.nil? %></td>
    <td><%= batch.batch_number %></td>
    <td><%= batch.total_quantity %></td>
    <td><%= batch.calculated_yeild %></td>

    <td><%= link_to '<i class="datato fa fa-calculator"></i>'.html_safe, batch, :id =>"#{batch.id}",  "data-toggle" => "modal", "data-target"=> "#myModal2" %></td>
    <td><%= link_to '<i class="fa fa-users"></i>'.html_safe, "#", :class => "addsupplier", :id => "#{batch.serial_id}", "data-toggle" => "modal", "data-target"=> "#myModal1" %></td>
    <td><%= link_to '<i class="fa fa-trash-o"></i>'.html_safe, batch, method: :delete, data: { confirm: 'Are you sure?' } %></td>

  </tr>
      <tr class="<%= batch.serial_id %>">


      </tr>
<% end %>

模态框表格

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-1 control-label">Date</label>
        <div class="col-lg-2">
            <input type="date" placeholder="Batch Number" class="form-control" required="">
        </div>
        <div class="form-group">
            <label class="col-lg-2 control-label">Batch Number</label>
            <div class="col-lg-2">
                <input type="text" placeholder="Batch Number" class="form-control" id = "myInput" >
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label">Total Quantity</label>
                <div class="col-lg-2">
                    <input type="text" placeholder="Total Quantity" class="form-control" required="">
                </div>
            </div>
        </div>
    </div>

    <br><br><br>

    <div class="form-group">
        <label class="col-lg-2 control-label" >Sample Yield</label>
        <div class="col-lg-10">
            <input type="text" placeholder="Sample Yield" class="form-control"  required="">
        </div>
    </div>

    <br><br><br><br>

    <div class="form-group">
        <label class="col-lg-2 control-label">Headless Quantity</label>
        <div class="col-lg-10">
            <input type="text" placeholder="Headless Quantity" class="form-control" required="">
        </div>
    </div>

    <br><br>

    <div class="form-group">
        <div class="col-lg-offset-2 col-lg-5">
            <button class="btn btn-primary" type="submit">Submit</button>
        </div>
    </div>
</form>

我有一张桌子和一张模态表格。我希望从表格中只获取Date，name和batch_number等表中的一些字段。

假设表包含以下数据。

In table Date: 08/17/2015
         Name: Dell
 batch_number: 1025-1025

现在我需要以模式框形式自动显示日期，名称和batch_number。请帮我讲解如何处理

注意：灯箱也不是问题。

Answer 1

您可以使用data-*属性作为

等字段

＆＃13;

$(function() {
  $('#myModal').on('show.bs.modal', function(event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var n = button.data('name'), // Extract info from data-* attributes
      b = button.data('batch')
    var modal = $(this)
    modal.find('#name').val(n);
    modal.find('#batch').val(b);
  });
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-name="XYZ" data-batch="123">Open modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <form class="form-horizontal">
    <div class="form-group">
      <label class="col-lg-2 control-label">Name</label>
      <div class="col-lg-2">
        <input type="text" placeholder="Name" class="form-control" id="name" />
      </div>
    </div>
    <div class="form-group">
      <label class="col-lg-2 control-label">Batch Number</label>
      <div class="col-lg-2">
        <input type="text" placeholder="Batch Number" class="form-control" id="batch" />
      </div>
    </div>
  </form>
</div>

＆＃13;

Answer 2

您可以使用$("tr td:(n)").text()获取td值。

$(".editButton").click(function(){

$(this).closest("tr").("td:(n)").text();
$(this).closest("tr").("td:(1)").text()
$(this).closest("tr").("td:(2)").text()
})

你可以试试这个......

如何将表字段的值设置为模态框？

2 个答案: