JavaScript将表格字段检索到模式窗口进行编辑?

JavaScript将表格字段检索到模式窗口进行编辑?,javascript,jquery,Javascript,Jquery,所以本质上,我试图实现的是一个表,它将有编辑和删除按钮,这反过来将显示一个模式窗口,或者是一个用于编辑的窗体,或者是一个用于删除的对话框。我可以自己解决删除一个,但编辑一个更难 这是我当前的表格: <table id="customersTable" class="table table-striped"> <thead> <tr> <th>UserID</th> <th&g

所以本质上,我试图实现的是一个表,它将有编辑和删除按钮,这反过来将显示一个模式窗口,或者是一个用于编辑的窗体,或者是一个用于删除的对话框。我可以自己解决删除一个,但编辑一个更难

这是我当前的表格:

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

用户ID
位置
Lol区域
名称
电子邮件
编辑
删除

要通过类或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;
    ?>

这非常有效,谢谢你给了我这样的见解:)
 <?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;
    ?>
$(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
   });
});