JSFiddle - React, Tailwind, and code Playground

by 533135

HTML

<table border =1 cellpadding =5 cellspacing =5>
<thead>
<tr>
<th>col1 <a href ="" class= sort >Asc</a>,<a href ="" class= sortd>dsc</a></th><th><a href ="" class= sort >Asc</a>,<a href ="" class= sortd>dsc</a>col2</th><th><a href ="" class= sort >Asc</a>,<a href ="" class= sortd>dsc</a>col3</th><th>col1 <a href ="" class= sort >Asc</a>,<a href ="" class= sortd>dsc</a></th><th>col1 <a href ="" class= sort >Asc</a>,<a href ="" class= sortd>dsc</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>6</td><td>c1</td><td>b61</td><td>san</td><td>book</td>
</tr>
<tr>
<td>2</td><td>c2</td><td>b1</td><td>man</td><td>pencil</td>
</tr>
<tr>
<td>7</td><td>c3</td><td>b1</td><td>did</td><td>paly</td>
</tr>
<tr>
<td>8</td><td>c4</td><td>b671</td><td>ant</td><td>mouse</td>
</tr>
<tr>
<td>5</td><td>c5</td><td>b51</td><td>cat</td><td>mike</td>
</tr>
<tr>
<td>1</td><td>c6</td><td>b7</td><td>dot</td><td>elephnt</td>
</tr>
<tr>
<td>-3</td><td>c7</td><td>b0</td><td>cow</td><td>computer</td>
</tr>
<tr>
<td>4</td><td>c8</td><td>b1</td><td>mango</td><td>sort</td>
</tr></tbody>
<tfoot></tfoot>
</table>

CSS

table
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:auto;
border-collapse:collapse;
}
table td, table th 
{
font-size:1em;
border:1px solid #98bf21;
padding:3px 7px 2px 7px;
}
table th 
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
table tr.alt td 
{
color:#000000;
background-color:#EAF2D3;
}

JavaScript

var arrays =[]; var  numbers =[];var mainArray=[];var clonedArray =[];var temp=[];var duplicatesCount=[];
var number;var x;
$(document).ready(readyit);
function readyit(){

	$('table tbody  tr').each(function(index, tr) {
	    var lines = $('td', tr).map(function(index, td) {
	        return $(td).text();
	    });
	   
	    mainArray.push(lines);

	});
	for(loop=0;loop<mainArray.length;loop++)
	clonedArray.push(mainArray[loop]);
	
	 $("table  tr").each(function(){
		  
		  $(this).find("td,th").each(function(o){
			  
			  $(this).addClass("sort_"+o);
			  
		  });
		
		 
	}); 
	 //ascending sort
	$(".sort").click(function(evnt){

		
		i=0;
	 x=$(this).parent().attr("class");
	  temp =x.split("_");
		 $("table tbody tr").each(function(){
			 var val= $(this).find("."+x).html();
			 if(val!= null && val!="")
			{
				 arrays[i]=$.trim(val);
				 i++;
			}
			 
		}); 
		
		 numbers= arrays.sort();
		 
		 rearrange();
		 evnt.preventDefault();
	});
	
	//descending sort
	$(".sortd").click(function(evnt){
		i=0;
		 x=$(this).parent().attr("class");
		 temp =x.split("_");
			 $("table tbody tr").each(function(){
				 var val= $(this).find("."+x).html();
				 if(val!= null && val!="")
				{
					 arrays[i]=$.trim(val);
					 i++;
				}
				 
			}); 		
			 numbers= arrays.sort();
			 numbers.reverse(); 
			 rearrange();
			 evnt.preventDefault();
		});
	
}
function rearrange(){
	var count=0;
	while(count<numbers.length)
	{
		duplicatesCount=[];
		for(sub=0;sub<clonedArray.length;sub++)
		{      
			if(numbers[count]==clonedArray[sub][temp[1]])
					duplicatesCount.push(sub);
			
			
		}
		for(actualCount=0;actualCount<duplicatesCount.length;actualCount++)
		{
			mainArray[count]=	clonedArray[duplicatesCount[actualCount]];
			count++;
		}
	}
$("table tbody tr").each(function(k){
	for(j=0;j<mainArray.length;j++)
	$(this).find("td:eq("+j+")").html(mainArray[k][j]);
}); 	

	 


}