使用jquery在modal中获取隐藏值

Question

在Jquery中

    $(document).ready(function () { 
      $("#employeeInfo").on('click',function() {
             employee_info = $(this).closest("tr");
             emp_id = employee_info.find("#emp_id");
             modal_emp_id = $("#modal_emp_id");
             modal_emp_id.val(emp_id.val());
         });
    });

在HTML中

    <tr>
      <td data-toggle='modal' data-target='#editEmployeeInfo' id='employeeInfo'>
        <input type="hidden" id="emp_id" name="emp_id" value="<?php $row["emp_id"] ?>"></input>
        <?php echo $row["name"]; ?>
      </td>
      <td><?php echo $row["department"]; ?></td>
    </tr>

     <div id='editEmployeeInfo' class='modal fade' role='dialog' aria-hidden='true' tabindex='-1'>
       <div class='modal-dialog'>
         <div class='modal-content'>
           <div class='modal-header'>
             <button type='button' class='close' data-dismiss='modal'>&times;</button>
               <h4 class='modal-title'>Edit Employee Info</h4>
           </div>
               <div class='modal-body'>
               <input type="hidden" id="modal_emp_id" name="modal_emp_id"></input>
              </div>
           </div>
         </div>
       </div>
     </div>

当点击员工姓名时，弹出模态，我想用Jquery获取所选员工的emp_id。

我想用Jquery获取所选员工的emp_id。

以上是我尝试过的方法。

你知道如何在Jquery中获取隐藏值吗？

Answer 1

你需要将表中行的ID改为类，并将选择符改为使用 . 而不是 #.

在下面的代码段中，我已经将模式中的隐藏输入改为文本输入，这样你就可以看到当你点击一个名字时，它就会被更新。

$(document).ready(function() {
  $(".employeeInfo").on('click', function() {
    employee_info = $(this).closest("tr");
    emp_id = employee_info.find(".emp_id");
    modal_emp_id = $("#modal_emp_id");
    modal_emp_id.val(emp_id.val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td data-toggle='modal' data-target='#editEmployeeInfo' class='employeeInfo'>
      <input type="hidden" class="emp_id" name="emp_id" value="123456"></input>
      John Smith
    </td>
    <td>
      Engineering
    </td>
  </tr>
</table>

<div id='editEmployeeInfo' class='modal fade' role='dialog' aria-hidden='true' tabindex='-1'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal'>&times;</button>
        <h4 class='modal-title'>Edit Employee Info</h4>
      </div>
      <div class='modal-body'>
        <input type="text" id="modal_emp_id" name="modal_emp_id"></input>
      </div>
    </div>
  </div>
</div>
</div>