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">&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数据的帮助,并在弹出窗口中传递它们以供进一步编辑?

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