JSFiddle - React, Tailwind, and code Playground
HTML
<div id="gallerypaginate2" class="paginationstyle"></div>
<div id="contents">
<table width="100%" class="vertical" id="contents-table">
<tr class="pagination-row">
<td width="25%" class="horizontal-seperator vertical-seperator">
<a href="mica136-3s.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2126916" width="125" height="71" border="0" hspace="0" vspace="0" alt="3-Shade Billiard Light - Oversized" title="3-Shade Billiard Light - Oversized" /></a>
<div class="name"><a href="mica136-3s.html" title="3-Shade Billiard Light - Oversized">3-Shade Billiard Light - Oversized</a></div>
<div class="price-bold">$2,088.00</div>
</td>
<td width="25%" class="horizontal-seperator vertical-seperator">
<a href="micaf101-01-abbey.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2132333" width="125" height="118" border="0" hspace="0" vspace="0" alt="Abbey Craftsman Fan and Mica Light Kit" title="Abbey Craftsman Fan and Mica Light Kit" /></a>
<div class="name"><a href="micaf101-01-abbey.html" title="Abbey Craftsman Fan and Mica Light Kit">Abbey Craftsman Fan and Mica Light Kit</a></div>
<div class="price-bold">$711.00</div>
</td>
<td width="25%" class="horizontal-seperator vertical-seperator">
<a href="mica007.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2150148" width="103" height="125" border="0" hspace="0" vspace="0" alt="Beanpot Table Lamp" title="Beanpot Table Lamp" /></a>
<div class="name"><a href="mica007.html" title="Beanpot Table Lamp">Beanpot Table Lamp</a></div>
<div class="price-bold">$442.00</div>
</td>
<td width="25%" class="horizontal-seperator">
<a href="mica012.html"><img src="http://ep.yimg.com/ca/I/yhst-129288146819219_2148_2162401" width="125" height="71"...
JavaScript
addListeners();
function addListeners()
{
var toggle = toggleTableSort;
var node = document.getElementById("sortTables");
node.onclick = toggle();
}
function toggleTableSort()
{
var status = 0;
return function()
{
var table = getTable();
var tableData = table['data'];
var rows = table['rows'];
if(status === 0)
{
status = 1;
sortTableData(tableData, rows, "descending");
}else if(status === 1)
{
status = 0;
sortTableData(tableData, rows, "ascending");
}
}
}
function getTable()
{
var container = document.getElementById("contents-table");
var tbody = getElementNodes(container, "TBODY", 1, {})[0];
var rows = getElementNodes(tbody, "TR", 0, {"class": "pagination-row"});
var tableData = grabTableData(rows);
return {"data": tableData, "rows": rows};
}
function getElementNodes(parent, tag, num, attributes)
{
var nodes = parent.childNodes;
var temp = [];
tag = tag.toUpperCase();
if(num === 0)
{
num = nodes.length;
}
for(var i=0;i<nodes.length;i++)
{
var node = nodes[i];
if(temp.length <= num)
{
if(node.nodeType === 1 && node.tagName === tag)
{
var attributeCheck = true;
for(var attribute in attributes)
{
if(attributes.hasOwnProperty(attribute))
{
var newAttribute;
if(attribute === "class" && !node.getAttribute(attribute))
{
newAttribute = "className";
}
if(newAttribute)
{
if(node.getAttribute(newAttribute) !== attributes[attribute])
{
attributeCheck = false;
...