JSFiddle - React, Tailwind, and code Playground

by Sanjay Ingole

HTML

<div class="section">
					<div class="sectionHeader"><span class="sectionTitle">History Items</span></div>
					<table width="100%" border="0" class="datatable2">

                    <tbody><tr>
                        <td class="tablehead">Date</td>
                        <td class="tablehead"><a href="#" rel="filterHead">From </a></td>
                            <td class="tablehead">Category</td>
                            <td class="tablehead">Event/Note</td>

                        </tr>

                            <tr id="clmhist_1" rel="datarow">
                                <td class="tablecontent rowEven">01/06/2015 5:47 PM CST</td>
                                <td id="fromValue1" class="tablecontent rowEven">Reinspectorone, Rockford</td>
                                <td class="tablecontent rowEven">Reinspection</td>

                                    <td class="tablecontent rowEven">Estimate Review Started Created By Reinspectorone, Rockford. </td>




                            </tr>

                            <tr id="clmhist_2" rel="datarow">
                                <td width="150px" class="tablecontent">01/06/2015 5:44 PM CST</td>
                                <td id="fromValue2" class="tablecontent">Adjusterone, Rockford</td>
                                <td class="tablecontent">Reinspection</td>

                                    <td class="tablecontent">Review/Reinspection has been re-assigned Created By Adjusterone, Rockford. Reinspection Reassigned from Reinspectorone, Salt to Reinspectorone, Rockford by Adjusterone,Rockford </td>




                            </tr>

                            <tr id="clmhist_3" rel="datarow">
                                <td class="tablecontent rowEven">01/06/2015 5:47 PM CST</td>
                                <td id="fromValue3" class="tablecontent rowEven">System</td>
                                <td class="tablecontent rowEven">Estimate/Supplement</td>

        ...

CSS

HTML {
    background: none repeat scroll 0 0 #D6D8D9;
    color: #393D4B;
    font-family: arial,helvetica,sans-serif;
    font-size: 12px;
    height: 100%;
    margin: 0;
    overflow: auto;
    padding: 0;
}
BODY {
    background: none repeat scroll 0 0 #D6D8D9;
    color: #393D4B;
    font-family: arial,helvetica,sans-serif;
    font-size: 12px;
    height: 100%;
    margin: 0;
    padding: 0;
}
.bodyClass {
    background-color: #FFFFFF;
}
.container {
    height: 100%;
    margin: 0 auto;
    min-height: 100%;
    min-width: 100%;
    position: relative;
    width: 100%;
}
form {
    margin-bottom: 0;
}
h1 {
    color: #393D4B;
    font-size: 14px;
    font-weight: bold;
    margin: 0;
    text-indent: 0;
}
H2 {
    color: #393D4B;
    font: 12px Arial,Helvetica,sans-serif;
    margin: 0;
}
H3 {
    color: #393D4B;
    font: 12px Arial,Helvetica,sans-serif;
    margin: 0;
}
p {
    color: #393D4B;
    font-size: 12px;
    margin: 2px 0;
}
td {
    font-size: 12px;
    padding: 0;
}
A {
    color: #0495C9;
    font-family: arial,helvetica,sans-serif;
    font-size: 12px;
    outline: medium none;
    text-align: left;
    text-decoration: none;
}
A:hover {
    color: #00B3DB;
    cursor: pointer;
    text-decoration: underline;
}
A:active {
    color: #0495C9;
    cursor: pointer;
    text-decoration: none;
}
A:focus {
    color: #0495C9;
    cursor: pointer;
    text-decoration: none;
}
ul {
    margin-bottom: 0;
    margin-top: 5px;
    padding-bottom: 0;
    padding-left: 0;
}
IMG {
    border-color: -moz-use-text-color;
    border-right: 0 none;
    border-style: none;
    border-width: 0;
}
li {
    color: #393D4B;
    font-family: Arial,Verdana,sans-serif;
    font-size: 11px;
    list-style-type: square;
    margin-bottom: 8px;
    margin-left: 15px;
}
#leftPanel li {
    color: transparent;
    list-style: none outside none;
}
SELECT {
    border: 2px solid #B2B4B6;
    height: 30px;
    margin: 0;
}
.datatable2 select {
    height: 20px;
}
option...

JavaScript

$(document).ready(function() {
	$('a[rel="filterHead"]').click(function(){                               
            showFromFilter();          
	    return false;
	}); 
});

function showFromFilter() {   
    
    rowclass = "";
    var counter = 0;
    filterListarr = [] ;
    var i = 0;
    var uniqueItems;
  $('td[id^="fromValue"]').each(function() {
            $this = $(this)
            var fromValue = $this.html(); 
      if(fromValue != "") {       
          filterListarr[i] = fromValue;
          i++;
      }
      
       var uniqueItems = unique( filterListarr );      
  });               

        //  alert(uniqueItems.length);

    $('td[id^="fromValue"]').each(function() {
            $this = $(this)
            var fromValue = $this.html();                        

            var tr = $('<tr></tr>');           
        
        ($('<td></td>').append($('<input type="checkbox" value="'+ fromValue +'"></input>')).append($('<label></label>').html(fromValue))).appendTo(tr);
        
         tr.appendTo('#fromFilterTable');		
        });  
                                    
    $("#fromFilterPopup").dialog();
}

function unique(arr) {
    var u = {}, a = [];
    for(var i = 0, l = arr.length; i < l; ++i){
        if(!u.hasOwnProperty(arr[i])) {
            a.push(arr[i]);
            u[arr[i]] = 1;
        }
    }
    return a;
}