Question

美好的一天！我有一个用户的表，看起来像。

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

还有一个模式窗口，您希望从表格行传输数据。

<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">&times;   </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数据的帮助，并在弹出窗口中传递它们以进行进一步编辑？

Answer 1

您可以使用此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);
});

然后点击事件提交表单：

$('.modal-footer .btn-primary').click(function() {
   $('form[name="modalForm"]').submit();
});

Bootply here

如何从弹出窗口中的表格行获取数据进行编辑？

1 个答案: