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