使用数据表打开模式

Question

我很困惑我的代码中的问题是什么。 我已经尝试过此工作代码，但对我不起作用。

我也已经尝试过'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">&times;</a> </div> <div class="modal-body"> <p>POP UP ME!!!</p> </div> </div> </div> </div> 

Answer 1

该代码工作正常。 只需修复表的标记，并确保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">&times;</a> </div> <div class="modal-body"> <p>POP UP ME!!!</p> </div> </div> </div> </div> 

Answer 2

这似乎对我有效。 您必须在用户可以单击并显示模式的行上显示tr 。

在此处添加您的代码<td><tr><tr></td>

 $(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%"> <tr><td><td></tr> <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">&times;</a> </div> <div class="modal-body"> <p>POP UP ME!!!</p> </div> </div> </div> </div> </table>