JSFiddle - React, Tailwind, and code Playground

by inki

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table id="table" class="table table-striped">
    <tr>
        <td>My Name</td>
        <td>Date</td>
        <td><!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger" onclick="$('#dd-modal').modal('show');event.stopPropagation();" >Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div></td>
    </tr>
    
<tr>
        <td>Some other Name</td>
        <td>Date</td>
        <td><!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger" onclick="$('#dd-modal').modal('show');event.stopPropagation();" >Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div></td>
    </tr>    
</table>
<div class="modal fade" id="tr-modal">
...

JavaScript

$(document).ready(function() {
$("#table").on("click", "tr",function(e){
    if (e.target.tagName !== "BUTTON" && e.target.parentElement.tagName !== "BUTTON") {
        $('#tr-modal').modal({
              backdrop: 'static',
              keyboard: false
            });
    }
});
});
function opener(){
  $('#dd-modal').modal('show');
}