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 class="cb_notes">Algerian soldiers had been surrounding the facility near In Amenas that kidnappers occupied on Wednesday, after killing a Briton and an Algerian.

Media reports quoting militants said 34 hostages and at least 14 kidnappers had been killed in the operation.

A local resident told Reuters news agency that there were multiple deaths.

There was no official confirmation of any deaths.</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

$(document).ready(function() {
    $('#tab_open_deals tbody tr').off('click').on('click', function() {
      alert('Row Clicked');       
    });
  
  
    
  $('.cb_notes').each(function() {
		var $this = $(this); 
	      var content = $this.html();
	      if (content.length > 100) {
	        var c = content.substr(0, 100);
	        if (c.indexOf('<') >= 0) // If there's HTML don't want to cut it
	        {
	          var inTag = false; // I'm in a tag?
	          var bag = ''; // Put the characters to be shown here
	          var countChars = 0; // Current bag size
	          var openTags = []; // Stack for opened tags, so I can close them later
	         
	          for (i=0; i<content.length; i++)
	          {
	            if (content[i] == '<' && !inTag)
	            {
	              inTag = true;
	             
	              // This could be "tag" or "/tag"
	              tagName = content.substring(i+1, content.indexOf('>', i));
	             
	              // If its a closing tag
	              if (tagName[0] == '/')
	              {
	                if (tagName != '/'+openTags[0]) console.log('ERROR en HTML: el tope del stack debe ser la tag que cierra');
	                else
	                  openTags.shift(); // Pops the last tag from the open tag stack (the tag is closed in the retult HTML!)
	              }
	              else
	              {
	                // There are some nasty tags that don't have a close tag like <br/>
	                if (tagName.toLowerCase() != 'br')
	                  openTags.unshift( tagName );// Agrega al inicio el nombre de la tag que abre
	              }
	            }
	            if (inTag && content[i] == '>')
	            {
	              inTag = false;
	            }
	           
	            if (inTag) bag += content[i]; // Add tag name chars to the result
	            else
	            {
	              if (countChars < 100)
	              {
	                bag += content[i];
	                countChars...