javascript - 使用数据表打开模式
问题描述
我很困惑我的代码中的问题是什么。我已经尝试过这个工作代码,但它对我不起作用。
我也已经试过'toggle'
了,也不管用。
这是我的代码:
$(document).ready(function() {
$('#example').on('click', 'tr', function() {
$("#inbox_modal").modal('show');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />
<table id="example" class="table table-bordered inbox" style="width:100%">
<div class="modal fade" id="inbox_modal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content modal-form">
<div class="modal-header">
<h4 class="modal-title">Example</h4>
<a data-dismiss="modal" style="cursor: pointer">×</a>
</div>
<div class="modal-body">
<p>POP UP ME!!!</p>
</div>
</div>
</div>
</div>
解决方案
代码工作正常。只需修复表格的标记并确保将 Bootstrap 组件包含在您的页面中。
$(document).ready(function() {
$('#example').on('click', 'tr', function() {
$("#inbox_modal").modal('show');
});
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<table id="example" class="table table-bordered inbox">
<tbody>
<tr>
<td>Click</td>
<td>here</td>
<td>please</td>
</tr>
</tbody>
</table>
<div class="modal fade" id="inbox_modal" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content modal-form">
<div class="modal-header">
<h4 class="modal-title">Example</h4>
<a data-dismiss="modal" style="cursor: pointer">×</a>
</div>
<div class="modal-body">
<p>POP UP ME!!!</p>
</div>
</div>
</div>
</div>
推荐阅读
- postgresql - 邮递员。如何为新表自动授予 SELECT 权限?
- python - 使用 Python 将 jsonfiles 发送到 EventHub
- python - Python pandas 数据框输出格式
- angular - 是否可以订阅 Angular 组件中的局部变量?
- java - 如何不在循环中使用 If 语句
- python-3.x - 从给定的 n 个元素数组中随机选择一个数字,其概率与其大小成正比
- php - 读取 XML 数据并更新变量数量
- laravel - Heroku 中的 Laravel 应用程序部署失败,无法处理返回的 post-autoload-dump 事件,错误代码为 1
- html - Outlook/Word 自动格式化 VBA 生成的电子邮件
- scala - 我有一个可变映射,我想将值分配给 Scala 中的键