使用编辑按钮单击在引导模式中显示特定行数据

时间:2013-08-17 03:35:55

标签: php jquery ajax twitter-bootstrap bootstrap-modal

我是编程并尝试实现bootstrap模式的新手,用于将mysql表中的行数据显示到模态窗口中。

我尝试过在stackoverflow上找到的解决方案“通过链接将信息从mysql表拉到bootstrap模式进行编辑”。但是无法使用$ row ['SFID']显示特定行。

我可以提取表格数据但是当我点击任意行前面的编辑​​按钮时,它总是会显示最后一行ID

并且不会在模态的输入框中显示数据以编辑数据???

我到现在为止,请帮助我。

<table class="table table-bordered" width="100%">
    <thead>
        <tr>
            <th>SFID</th>
            <th>Company</th>
            <th>Product</th>
            <th>Product Line</th>
            <th>Dealer Class</th>
            <th>Status</th>
        </tr>
    </thead>
    <?php
        $query = "SELECT * FROM tblcustomer";
        $stmt = $db->prepare($query);
        $stmt->execute();

        foreach ($stmt as $row): ?>
            <tr>
    <?php $rowID = $row['SFID']; ?>

                <td><?php echo $row['SFID']; ?></td>
                <td><?php echo $row['CompanyName']; ?></td>
                <td><?php echo $row['Product']; ?></td>
                <td><?php echo $row['ProductLine']; ?></td>
                <td><?php echo $row['DealerClass']; ?></td>
                <td><?php echo $row['RequestStatus']; ?></td>
                <td style="text-align: center">
                    <div class="btn-toolbar">
                        <div class="btn-group">
                            <a class="btn btn-danger" href="#delModal"  data-toggle="modal"><i class="icon-trash icon-white"></i> Delete</a>

            <?php echo "<a class='btn update' href='#editModal' data-sfid='".$row['SFID']."' role='button' data-toggle='modal'>Edit</a>"; ?>
 </div>
                    </div>
                </td>
             </tr>
     <?php endforeach; ?>
 </table>

     <div id="editModal" class="modal hide fade in" style="display: none; ">
 <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Edit Customer Details</h3>
</div>
 <div>
<form class="contact">
   <fieldset>
    <div class="modal-body">
        <?php echo $row['SFID']; ?> 
        <ul class="nav nav-list">
        <li class="nav-header">SFID</li>
        <li><input class="input-xlarge" type="text" name="mysfid" id="mysfid"></li>
        <!--<li class="nav-header">Company</li>
        <li><input class="input-xlarge" value=" " type="text" name="mycompany"></li>
        <li class="nav-header">Dealer Class</li>
        <li><input class="input-xlarge" value=" " type="text" name="mydealerclass"></li> -->
        </ul> 
     </div>
    </fieldset>
</form>
 </div>
 <div class="modal-footer">
    <button class="btn btn-success" id="submit">Approved</button>
      <a href="#" class="btn" data-dismiss="modal">Close</a>
 </div>
</div>

  <script>
    $(document).ready(function(){
    $('a.edit').click(function(){
    var sfid = $(this).data('sfid');
    var company = $(this).data('company');
    var dealerclass = $(this).data('dealerclass');    

    $('#mysfid').val(sfid);
    $('#mycompany').val(company);
    $('#mydealerclass').val(dealerclass);
    });

    });
    </script>

感谢您的帮助。

3 个答案:

答案 0 :(得分:5)

<table class="table table-bordered" width="100%">
    <thead>
        <tr>
            <th>SFID</th>
            <th>Company</th>
            <th>Product</th>
            <th>Product Line</th>
            <th>Dealer Class</th>
            <th>Status</th>
        </tr>
    </thead>
    <?php
        $query = "SELECT * FROM tblcustomer";
        $result = mysql_query($query);
        $i=1;
        while($row = mysql_fetch_assoc($result))
        {
    ?>
            <tr>
    <?php $rowID = $row['SFID']; ?>

                <td><?php echo $row['SFID']; ?></td>
                <td><?php echo $row['CompanyName']; ?></td>
                <td><?php echo $row['Product']; ?></td>
                <td><?php echo $row['ProductLine']; ?></td>
                <td><?php echo $row['DealerClass']; ?></td>
                <td><?php echo $row['RequestStatus']; ?></td>
                <td style="text-align: center">
                    <div class="btn-toolbar">
                        <div class="btn-group">
                            <a class="btn btn-danger" href="#delModal"  data-toggle="modal"><i class="icon-trash icon-white"></i> Delete</a>

                            <a class="btn update" href="#editModal<?php echo$i?>" data-sfid='"<?php echo $row['SFID'];?>"' data-toggle="modal">Edit</a>
                            <!--Yor Edit Modal Goes Here-->
                            <div id="editModal<?php echo $i; ?>" class="modal hide fade in" role="dialog" ria-labelledby="myModalLabel" aria-hidden="true">
                             <div class="modal-header">
                                <a class="close" data-dismiss="modal">×</a>
                                <h3>Edit Customer Details</h3>
                            </div>
                             <div>
                            <form class="contact">
                               <fieldset>
                                <div class="modal-body">
                                    <?php echo $row['SFID']; ?> 
                                    <ul class="nav nav-list">
                                    <li class="nav-header">SFID</li>
                                    <li><input class="input-xlarge" type="text" name="mysfid" id="mysfid"></li>
                                    <!--<li class="nav-header">Company</li>
                                    <li><input class="input-xlarge" value=" " type="text" name="mycompany"></li>
                                    <li class="nav-header">Dealer Class</li>
                                    <li><input class="input-xlarge" value=" " type="text" name="mydealerclass"></li> -->
                                    </ul> 
                                 </div>
                                </fieldset>
                            </form>
                             </div>
                             <div class="modal-footer">
                                <button class="btn btn-success" id="submit">Approved</button>
                                  <a href="#" class="btn" data-dismiss="modal">Close</a>
                             </div>
                            </div>

                             </div>
                    </div>
                </td>
             </tr>
     <?php $i++; } ?>
 </table>

答案 1 :(得分:0)

将$ i = 1置于循环之上,并在for循环的每次迭代中递增它。所以它将采用每个记录

您的表单

<a class='btn update' href='#editModal<?php echo $i;?>' data-sfid='".$row['SFID']."' role='button' data-toggle='modal'>Edit</a>

模态窗口

<div id="editModal<?php echo $i;?>" class="modal hide fade in" style="display: none; ">

答案 2 :(得分:0)

这是因为您使用$row数据填充编辑模式,然后该数据位于最后一项。

要获取特定行的数据,您可以创建一个javascript对象/数组,然后通过使用“编辑”链接中的data-rfid参数来获取数据。或者你可以用Ajax获取行。例如。