JavaScript 检索表字段到模态窗口进行编辑？

Question

所以基本上我想要实现的是一个将具有编辑和删除按钮的表，该按钮将显示一个模式窗口，要么是用于编辑的表单，要么是用于删除的对话框。我可以自己解决删除问题，但编辑问题更难。

这是我当前的表:

<table id="customersTable" class="table table-striped">
  <thead>
      <tr>
          <th>UserID</th>
          <th>Position</th>
          <th>Lol Region</th>
          <th>Name</th>
          <th>Email</th>
          <th>Edit</th>
          <th>Delete</th>
      </tr>
  </thead>
  <tbody>
    <?php
      foreach ($customers as $customer): ?>
        <tr id="<?php echo $customer->user_id; ?>">
          <td><?php echo $customer->user_id; ?></td>
          <td><?php echo $customer->type; ?></td>
          <td><?php echo $customer->region; ?></td>
          <td><?php echo $customer->full_name; ?></td>
          <td><?php echo $customer->email; ?></td>
          <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
          <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td>
        </tr>
      <?php endforeach;
    ?>
  </tbody>
</table>

还有我的模态形式:

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
  <h4 class="modal-title custom_align" id="Heading">Edit Customers Details</h4>
</div>
<div class="modal-body">
  <div class="form-group">
    <input class="form-control " type="text" placeholder="">
  </div>
  <div class="form-group">
    <input class="form-control " type="text" placeholder="">
  </div>
  <div class="form-group">
    <textarea rows="2" class="form-control" placeholder=""></textarea>
  </div>
</div>
  <div class="modal-footer ">
    <button type="button" class="btn btn-warning btn-lg" style="width: 100%;"><span class="glyphicon glyphicon-ok-sign"></span> Update</button>
  </div>
</div>
<!-- /.modal-content -->
</div>
  <!-- /.modal-dialog -->
</div>

因为我不太擅长 Javascript，所以我假设我可能必须在包含单击按钮的 tr 中选择最接近的值，但我不确定。

建议如何解决这个问题？ -- 请注意，表单将 POST 到一个 PHP 文件，因此我将需要以某种方式重绘该表，因为它是一个数据表。

谢谢

Answer 1

要通过 class 或 id 访问数据，您还有很多工作要做。我会像这样修改您的 html

 <?php
      foreach ($customers as $customer): ?>
        <tr id="<?php echo $customer->user_id; ?>">
          <td class='userid'><?php echo $customer->user_id; ?></td>
          <td class='usertype'><?php echo $customer->type; ?></td>
          <td class='region'><?php echo $customer->region; ?></td>
          <td class='fullname'><?php echo $customer->full_name; ?></td>
          <td class='email'><?php echo $customer->email; ?></td>
          <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs edit" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>
          <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs delete" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td>
        </tr>
      <?php endforeach;
    ?>

也给你编辑和删除一个类

然后使用 jQuery

$(document).ready(function(){
   $('.edit').click(function(){
     alert($(this).closest('tr').find('.userid').html()); //you will get the userid
     //same way you can get the remaining values ,just change the find parameter with its classname
   //now assign it to the form value
  $('#your_model_form_value_username').val($(this).closest('tr').find('.username').html());
//same way do the rest
   });
});