使用数据表打开模式

Question

I'm so confused what the problem in my code is. I've already tried this working code but it doesn't work for me.

I've also already tried 'toggle' and that doesn't work either.

This is my code:

 $(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

The code works fine. Just fix markup of the table and make sure the Bootstrap components are included to your page.

 $(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

It seems to work on my end. You have to display tr a row where the user could click and show the modal.

Here added on your code <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>