Javascript 如何将行值传递到模式中？

如何获取按钮所在行中表数据的值？我尝试将{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>

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

付款人
到期日
附加费
行动
交易
{第%行中的第%行}
{{row.name}
{{row.date}
{{行.惩罚}}
编辑
删除
支付
{%endfor%}

以下是我的模式的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>

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

情态标题
&时代；
名称
日期
处罚
接近
保存更改

---

顺便说一句，我正试图用我的表格行中的值在我的模式中自动填充表单…

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

<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 );
    })
});

编辑
$（函数（）{
$（“.mybutton”）。单击（函数（）{
var my_row_value=$（this.attr（'data-row-val'）；
$（“#exampleModal”）.attr（'data-row-value'，my-row-value）；
警报（“我的行值”+我的行值）；
})
});

---

这里是

当前脚本试图在模式中自动填充表单的位置？请发表这篇文章，让我们知道它为什么不起作用，最好是在一个演示问题的工作片段中。