在模式引导中使用jquery或javascript传递数据

Passing data using jquery or javascript in modal bootstrap

本文关键字:javascript 数据 jquery 模式      更新时间:2023-09-26

我有一个从SQL表表示的表,它用PHP循环所有数据。

.HTML

<tbody>
   <?php
    $no = 1;
    foreach($data_request as $data) {
    ?>
  <tr>
    <td class="center"><?php echo $no++.". ";?> </td>                                           
    <td class="sorting1"><?php echo $data['id_request'];?> </td>
    <td class="center"><?php echo "$nama"; ?></td>                               
    <td  class="right">
       <a class="btn btn-danger" href="#">
         <i class="halflings-icon white trash"></i> Close</a>
       <a class="btn btn-success" href="#" id="print"?>">
         <i class="halflings-icon pencil"></i> Preview  </a>         
   </td>
  </tr>
   <?php } ?>
   </tbody>
   </table>  

  <div class="modal hide fade" id="myModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Print Preview</h3>
        </div>
        <div class="modal-body">
            /*This would be a preview*/

        </div>
        <div class="modal-footer">
             <a href="#" class="btn btn-primary">Make it to PDF</a>
            <a href="#" class="btn" data-dismiss="modal">Close</a>
        </div>
    </div>

我的问题是,如果用户单击预览按钮,我想向模式引导显示行数据。因此,如果用户单击第 1 行中的按钮,模态将显示表的第一行中的所有字段/数据。到目前为止,我成功地使用 jquery 传递数据,如下所示:

 <script>
        $('.btn-success').click(function(){
            var address = [];
                $(this).closest('tr').find('td').not(':last').each(function() {
                var textval = $(this).text(); // this will be the text of each <td>
                address.push(textval);
            });
            alert(address.join(''n'));
        });
    </script>

我很困惑将数据从脚本传递到模态,任何人都可以提供帮助?

最好在

从 SQL DB 呈现行时为行提供唯一 ID。

<tbody>
   <?php
    $no = 1;
    foreach($data_request as $data) {
    ?>
  <tr id="row_<?php echo $data['id_request']; ?>">
    <td class="center"><?php echo $no++.". ";?> </td>                                           
    <td class="sorting1"><?php echo $data['id_request'];?> </td>
    <td class="center"><?php echo "$nama"; ?></td>                               
    <td  class="right">
       <a class="btn btn-danger" href="#">
         <i class="halflings-icon white trash"></i> Close</a>
       <a class="btn btn-success" href="#" id="print_<?php echo $data['id_request']; ?>"">
         <i class="halflings-icon pencil"></i> Preview  </a>         
   </td>
  </tr>
   <?php } ?>
   </tbody>
   </table>  

  <div class="modal hide fade" id="myModal">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Print Preview</h3>
        </div>
        <div class="modal-body">
            /*This would be a preview*/

        </div>
        <div class="modal-footer">
             <a href="#" class="btn btn-primary">Make it to PDF</a>
            <a href="#" class="btn" data-dismiss="modal">Close</a>
        </div>
    </div>

脚本:

<script>
        $('.btn-success').click(function(){
            var address = [];
            var trId = $(this).attr('id').split('_')[1];
            $('#row_'+trId).find('td').each (function() {
                address.push($(this).text());
           });
           alert(address.join(''n'));
           $('#myModal > .modal-body').html(address.join(''n'));
           $('#myModal').modal('show');
        });
    </script>