在模式引导中使用jquery或javascript传递数据
Passing data using jquery or javascript in modal bootstrap
我有一个从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>
相关文章:
- JavaScript数据结构
- 父级对子 JavaScript 数据的访问
- 更改动态 JavaScript 数据
- Javascript 数据可用事件
- 将javascript数据放入表单中
- 将json结构转换为可用的javascript数据集
- 从HTML表单中获取计算得到的JavaScript数据,并将其作为新元素添加到相同的表单操作中以使用PHP保存
- 数值的 JavaScript 数据类型
- 使用 ajax 将 JavaScript 数据传输到 PHP
- Javascript数据将元素属性绑定到URL中的锚href
- 整页回发和javascript数据
- 如何使用javascript数据对象?如何通过变量访问条目
- 如何将从数据库中提取的数字传递到javascript数据部分
- Spring MVC与Google图表,创建javascript数据表的最佳方式是什么
- JavaScript 数据中的 XSS
- 无法将我的 JavaScript 数据填充为 HTML
- 如何将相同的 JavaScript 数据传递给 HTML 两种不同的方式
- JavaScript 数据结构,JS中的ArrayList(Java)
- 将 casper javascript 数据插入 CSV 文件
- 用于高效插入和搜索的 Javascript 数据结构