通过单击编辑按钮在引导模式中显示特定的行数据
Posted
技术标签:
【中文标题】通过单击编辑按钮在引导模式中显示特定的行数据【英文标题】：Display specific row data in bootstrap modal with edit button click 【发布时间】：2013-08-19 12:59:44 【问题描述】：我是编程新手，并试图实现引导模式以将 mysql 表中的行数据显示到模式窗口中。
我已尝试通过链接在 ***“将信息从 mysql 表中提取到引导模式以进行编辑”中找到的解决方案。但无法使用 $row['SFID'] 显示特定行。
我可以提取表格数据，但是当我单击任何行前面的编辑按钮时，它总是显示最后一行 id
并且在编辑数据的modal上的输入框中不显示数据？？？。
我到现在为止，请帮帮我。
<table class="table table-bordered" >
<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>
感谢您的帮助。
【问题讨论】：
@LuzanBaral 上面的页面链接无法正常工作，请参阅 db 错误。 @GanganiRoshan 你可以在这里找到相同的更新教程justcode.me/php/… @LuzanBaral 感谢更新。 【参考方案1】：在 for 循环上面取 $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; ">
【讨论】：
感谢 Ashish 花时间研究我的问题。我尝试了您的建议，但是通过在模态的 div id 中添加 $i 值会更改模态的 id，并且它不会通过单击按钮打开。 忽略我之前的回复，我的错。我没有按照建议在href中添加相同的内容。我进行了更改并对其进行了测试，但输出仍然没有变化。模态窗口打开，但输入框中没有值，仍然从任何按钮中选择最后一条记录。 我使用了 Ashish 的解决方案，并获得了具有唯一模态 ID 的每一行，但模态窗口没有打开。任何关于单击按钮时未打开窗口的建议。任何建议将不胜感激。【参考方案2】：<table class="table table-bordered" >
<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>
【讨论】：
感谢 Ashish，我通过单击该行的“编辑”按钮获取模式中的第一行数据。如果我点击其他行按钮，那么我没有得到任何数据，这意味着它工作正常，现在我需要弄清楚用按钮显示下一行数据。 您想通过在 Modal Window 中单击“Next”按钮在 Modal 窗口中显示下一个数据？ 感谢 Ashish，稍作改动后，它按我的要求工作。感谢您的帮助。 welx.. //$num_details = no.来自你的查询的元素试试这个 js 样式，它将为你的模态提供弹出效果。 （根据您的要求调整 css 属性）【参考方案3】：这是因为您使用 $row 数据填充了编辑模式，到那时，该数据位于最后一项上。
要获取特定行的数据，您可以创建一个 javascript 对象/数组，然后使用“编辑”链接中的 data-rfid 参数获取数据。或者您可以使用 Ajax 获取行。
【讨论】：
以上是关于通过单击编辑按钮在引导模式中显示特定的行数据的主要内容，如果未能解决你的问题，请参考以下文章