Question

如何在我的按钮所在的行中获取表数据的值？我在我的模态中尝试了{{row.name}}作为值，但似乎没有用。什么是正确的方法？

以下是我的表格的Html代码：

<table id="myTable" class="table table-hover">
<thead class="thead-dark">
  <tr>
    <th scope="col">Payor</th>
    <th scope="col">Due Date</th>
    <th scope="col">Surcharge</th>
    <th scope="col">Action</th>
    <th scope="col">Transaction</th>
  </tr>
</thead>
<tbody>
  {%for row in rows%}
  <tr>
  <td>{{row.name}}</td>
  <td>{{row.date}}</td>
  <td>{{row.penalty}}</td>
  <td><button type="button" class="btn btn-primary" data-toggle="modal" data-
    target="#exampleModal" id="editRow" >Edit</button>
      <form action="/delinquincy/delete" method="POST">
        <input type="hidden" name="delete_row" value="{{row.name}}">
        <button type="submit" class="btn btn-danger" 
    name="delete">Delete</button>
    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-
   target="#payModal" id="pay" >Pay</td>
     </form>
      </td>
      </tr>
      {% endfor %}
    </tbody>
</table>

以下是我的模态的HTML代码：

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <form class="form-horizontal" action="/delinquincy/edit" method="POST" role="form">
      <input type="text" name="entity_key" class="hidden">
    <div class="modal-body">
    <div class="form-group">
    <label for="payor" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="payor" name="payor" placeholder="name">
    </div>
  </div>
  <div class="form-group">
    <label for="penalty" class="col-sm-2 control-label">Date</label>
    <div class="col-sm-10">
      <input type="date" class="form-control" id="date" name="date">
    </div>
  </div>

  <div class="form-group">
    <label for="penalty" class="col-sm-2 control-label">Penalty</label>
    <div class="col-sm-10">
      <input type="number" class="form-control" id="penalty" name="penalty" placeholder="Amount">
    </div>
  </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="submit" class="btn btn-primary">Save changes</button>
      </form>
    </div>
  </div>
</div>
</div>

顺便说一下，我试图用我的表行中的值自动填充我的模态中的表单...

Answer 1

点击按钮后，您可以获得价值，如下所示。只需在按钮上添加另一个类，并在这些按钮上绑定事件。

<button type="button" class="btn btn-primary mybutton" data-toggle="modal" data-
target="#exampleModal" id="editRow" data-row-val="{{row.name}}">Edit</button>

<script type="text/javascript">
$(function () {
    $(".mybutton").click(function () {
        var my_row_value = $(this).attr('data-row-val');
        $("#exampleModal").attr('data-row-value',my_row_value );
       alert('My Row Value '+my_row_value );
    })
});

以下是fiddle.

如何将行值传递给我的模态？

1 个答案: