JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<table id="tab_open_deals" class="table table-condensed table-striped cb_table-hover">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody id="search_result">
    <tr>
      <td><a class="btn my_btn hidden2" href="#">Button</a></td>
      <td>39.90</td>
      <td>29 Dec 2012</td>
    </tr>
  <tr>
    <td><a class="btn my_btn hidden2" href="#">Button</a></td>
    <td>1499.00</td>
    <td>8 Jan 2013</td>
  </tr>

 </tbody>
</table>

CSS

.cb_inline_block {
    display:inline-block;
}

.hidden2{
	display: none;
}


table.sub_table-hover tbody tr:hover td,
table.sub_table-hover tbody tr:hover th{
      background-color: #cfe2e8;  
}

table.cb_table-hover > tbody > tr:hover > td:not(.override),
table.cb_table-hover > tbody > tr:hover > th:not(.override){
      background-color: #cfe2e8;  
}

JavaScript

$(document).ready(function() {
    $('#tab_open_deals tbody tr').off('click').on('click', function() {
        var row = $('<tr/>');
        row.load('/echo/html/', {
            html: '<td class="override" colspan="4"><table class="table-striped sub_table-hover"><thead><tr><th>Sub1</th><th>Sub2</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></td>'
        });

        row.insertAfter($(this));
      $(this).find(".my_btn").off('click').on('click', function(){ alert("clicked") })
        $(this).find(".my_btn").show();
    });
});