How to get data from table row in popup for editing?
Good day! I have a table with users, it looks like.
<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>
And there is a modal window where you want to transfer data from a table row.
<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>
Please tell me how to get help with the Jquery data from the table row and pass it in the popup for further editing?
+3
source to share
1 answer
You can use this JavaScript to output from a table:
$(".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);
});
And then the click event to submit the form:
$('.modal-footer .btn-primary').click(function() {
$('form[name="modalForm"]').submit();
});
+2
source to share