获取隐藏的表单值并以模态显示

Question

下面是我页面上的表格。在每一行中，您都会看到一个名为“unitType”的隐藏值。我想要做的是单击每一行上的一个按钮，获取该特定行的unitType隐藏值的值，并弹出一个bootstrap模式，并使用隐藏字段中的值设置模态图像标记src并连接其余的在bootstrap模式中显示相应图像的路径。

希望这是在这里问的正确方法。

<form action="" method="POST">
<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Location</th>
                <th scope="col">Serial #</th>
                <th scope="col">Level</th>
                <th scope="col"></th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr scope="row">
                <td class="align-middle">East Entrance (Elvis Car)</td>
                <td class="align-middle">CR5E180022B</td>
                <td><input type="number" name="LevelAmount[]" class="unitType form-control" value=""></td>
                <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Image</button></td>
                <td><input type="hidden" class="unitType" name="unitType" value="Sienna 5 B.png"></td>
                <td><input type="hidden" name="id[]" value="S1149"></td>
            </tr>
            <tr scope="row">
                <td class="align-middle">Hotel Elevator Bthrm - Womens</td>
                <td class="align-middle">CS3G170159</td>
                <td><input type="number" name="LevelAmount[]" class="unitType form-control" value=""></td>
                <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Image</button></td>
                <td><input type="hidden" class="unitType" name="unitType" value="Sienna 3.png"></td>
                <td><input type="hidden" name="id[]" value="S1151"></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="row">
    <div class="col-12 text-right"><input type="hidden" name="SessionID[]" value="">
        <input class="btn btn-warning" type="submit" name="submit" value="Submit">
    </div>
</div>

下面的html是我的bootstrap模态代码。

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title">Diffuser</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
    <img id="unitType" src="">
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
    </div>
</div>

Answer 1

请找到更新的答案

$("button").click(function() {
  var ele = $(this).parents('tr').find('input[type="hidden"]').val()
  alert(ele)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" method="POST">
  <div class="table-responsive">
    <table class="table table-striped table-sm">
      <thead class="thead-dark">
        <tr>
          <th scope="col">Location</th>
          <th scope="col">Serial #</th>
          <th scope="col">Level</th>
          <th scope="col"></th>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr scope="row">
          <td class="align-middle">East Entrance (Elvis Car)</td>
          <td class="align-middle">CR5E180022B</td>
          <td><input type="number" name="LevelAmount[]" class="unitType form-control" value=""></td>
          <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Image</button></td>
          <td><input type="hidden" class="unitType" name="unitType" value="Sienna 5 B.png"></td>
          <td><input type="hidden" name="id[]" value="S1149"></td>
        </tr>
        <tr scope="row">
          <td class="align-middle">Hotel Elevator Bthrm - Womens</td>
          <td class="align-middle">CS3G170159</td>
          <td><input type="number" name="LevelAmount[]" class="unitType form-control" value=""></td>
          <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Image</button></td>
          <td><input type="hidden" class="unitType" name="unitType" value="Sienna 3.png"></td>
          <td><input type="hidden" name="id[]" value="S1151"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="row">
    <div class="col-12 text-right"><input type="hidden" name="SessionID[]" value="">
      <input class="btn btn-warning" type="submit" name="submit" value="Submit">
    </div>
  </div>