Jquery 如何从弹出窗口中的表行获取数据进行编辑?
你好!我有一张有用户的桌子,看起来像Jquery 如何从弹出窗口中的表行获取数据进行编辑?,jquery,twitter-bootstrap-3,Jquery,Twitter Bootstrap 3,你好!我有一张有用户的桌子,看起来像 <table class="table table-bordered table-striped"> <thead> <th>№</th> <th>Name</th> <th>Email/Login</th>
<table class="table table-bordered table-striped">
<thead>
<th>№</th>
<th>Name</th>
<th>Email/Login</th>
<th>Phone</th>
<th>Skype</th>
<th>Role</th>
<th>Edit</th>
</thead>
<tbody>
@foreach($userlist as $user)
<tr>
<td style="text-align:center;"><?php echo $i++ ?></td>
<td>{{ $user->username }}</td>
<td style="text-align:center;">{{ $user->email }}</td>
<td style="text-align:center;">{{ $user->phone }}</td>
<td style="text-align:center;">{{ $user->skype }}</td>
<td style="text-align:center;">{{ $user->role }}</td>
<td style="text-align:center;">
<button class="btn btn-success" data-toggle="modal" data-target="#myModal"> Edit</button>
</td>
</tr>
@endforeach
</tbody>
</table>
№
名称
电子邮件/登录
电话
视频电话
角色
编辑
@foreach($userlist作为$user)
{{$user->username}
{{$user->email}
{{$user->phone}
{{$user->skype}
{{$user->role}
编辑
@endforeach
还有一个模式窗口,您希望在其中传输表行中的数据
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">× </span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
&时代;接近
情态标题
接近
保存更改
请告诉我如何从表行获取Jquery数据的帮助,并在弹出窗口中传递它们以供进一步编辑?您可以使用此JavaScript从表中提取:
$(".btn[data-target='#myModal']").click(function() {
// Get array of column Headings
var columnHeadings = $("thead th").map(function() {
return $(this).text();
}).get();
// Remove the last column heading (for the Edit button)
columnHeadings.pop();
// Get array of column values from the row where the Edit button was clicked
var columnValues = $(this).parent().siblings().map(function() {
return $(this).text();
}).get();
var modalBody = $('<div id="modalContent"></div>');
var modalForm = $('<form role="form" name="modalForm" action="putYourPHPActionHere.php" method="post"></form>');
// Create the form in the modal dynamically
$.each(columnHeadings, function(i, columnHeader) {
var formGroup = $('<div class="form-group"></div>');
formGroup.append('<label for="'+columnHeader+'">'+columnHeader+'</label>');
formGroup.append('<input class="form-control" name="'+columnHeader+i+'" id="'+columnHeader+i+'" value="'+columnValues[i]+'" />');
modalForm.append(formGroup);
});
modalBody.append(modalForm);
$('.modal-body').html(modalBody);
});
@mccannf早安mccannf!您的代码运行良好,表单是从表中动态创建的!但是,当发送此表单时,我收到以下消息。数组(0){}@viktorepanov-hmm。可能需要name属性。固定在上面。
$('.modal-footer .btn-primary').click(function() {
$('form[name="modalForm"]').submit();
});