JSFiddle - React, Tailwind, and code Playground

by houmie

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>Lunch Deal- Light</td>
      <td>39.90</td>
      <td>29 Dec 2012</td>
    </tr>
  <tr>
    <td>hol</td>
    <td>1499.00</td>
    <td>8 Jan 2013</td>
  </tr>
  <tr class="test">
    <td>new deal</td>
    <td>1002.00</td>
    <td><a href="#" class="btn morelink">Test</a> </td>
  </tr>
 </tbody>
</table>

CSS

.cb_inline_block {
    display:inline-block;
}



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


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

JavaScript

$.fn.shorten = function(settings) {
 
   var config = $.extend( {
     showChars : 100,
     ellipsesText : "...",
     moreText : "more",
     lessText : "less"
    }, settings);
  
  $(document).off('click', '.morelink').on('click', '.morelink', function(e){ 
        e.preventDefault(); 
    	e.stopPropagation();   
    alert('Test clicked');
    
  });
}

$(document).ready(function() {
    $('#tab_open_deals tbody tr').off('click').on('click', function() {
      alert('Row Clicked');       
    });
  
  $('.test').shorten();
    

});