We Keep Coding

How to sort table in HTML by number

How to sort tables in HTML by number
By the way, I know there are questions like this on StackOverflow but none address my issue so please don't close my question with a response of a post with a similar title, but nothing to do with my issue
Context
I am creating a web application for a non-profit little league team. It simply displays the player info on the live stream when you select them in the web app. My client wanted it so it displays the players in order by their batting number, so I did this with the sorttable.js or whatever it is called but I'm having sorting issues
Issues
For example if this is the table
Name
Batting Order
Player 1
1
Player 2
10
Player 3
2
10 would go before 2 because it has a 1.
What I've tried
I've tried making 1 to 01 and 2 to 02 which did work. But I can't use this because the system to calculate whose next gets confused with 02.
What I want
I want to be able to sort my HTML table with javascript by number in the correct order without having 10 be before 2
Code
In case it's needed this is the code
<table class='table table-hover table-dark table-bordered sortable'>
<thead>
<tr>
<!-- <th>Picture</th> -->
<th>Name</th>
<th>Number</th>
<th>Batting Order</th>
<th>Action</th>
</tr>
</thead>
<tbody id="homes">
</tbody>
sorttable.js
/*
SortTable
version 2
7th April 2007
Stuart Langridge, http://www.kryogenix.org/code/browser/sorttable/
Instructions:
Download this file
Add <script src="sorttable.js"></script> to your HTML
Add class="sortable" to any table you'd like to make sortable
Click on the headers to sort
Thanks to many, many people for contributions and suggestions.
Licenced as X11: http://www.kryogenix.org/code/browser/licence.html
This basically means: do what you want with it.
*/
var stIsIE = /*#cc_on!#*/false;
sorttable = {
init: function() {
// quit if this function has already been called
if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
// kill the timer
if (_timer) clearInterval(_timer);
if (!document.createElement || !document.getElementsByTagName) return;
sorttable.DATE_RE = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
forEach(document.getElementsByTagName('table'), function(table) {
if (table.className.search(/\bsortable\b/) != -1) {
sorttable.makeSortable(table);
}
});
},
makeSortable: function(table) {
if (table.getElementsByTagName('thead').length == 0) {
// table doesn't have a tHead. Since it should have, create one and
// put the first table row in it.
the = document.createElement('thead');
the.appendChild(table.rows[0]);
table.insertBefore(the,table.firstChild);
}
// Safari doesn't support table.tHead, sigh
if (table.tHead == null) table.tHead = table.getElementsByTagName('thead')[0];
if (table.tHead.rows.length != 1) return; // can't cope with two header rows
// Sorttable v1 put rows with a class of "sortbottom" at the bottom (as
// "total" rows, for example). This is B&R, since what you're supposed
// to do is put them in a tfoot. So, if there are sortbottom rows,
// for backwards compatibility, move them to tfoot (creating it if needed).
sortbottomrows = [];
for (var i=0; i<table.rows.length; i++) {
if (table.rows[i].className.search(/\bsortbottom\b/) != -1) {
sortbottomrows[sortbottomrows.length] = table.rows[i];
}
}
if (sortbottomrows) {
if (table.tFoot == null) {
// table doesn't have a tfoot. Create one.
tfo = document.createElement('tfoot');
table.appendChild(tfo);
}
for (var i=0; i<sortbottomrows.length; i++) {
tfo.appendChild(sortbottomrows[i]);
}
delete sortbottomrows;
}
// work through each column and calculate its type
headrow = table.tHead.rows[0].cells;
for (var i=0; i<headrow.length; i++) {
// manually override the type with a sorttable_type attribute
if (!headrow[i].className.match(/\bsorttable_nosort\b/)) { // skip this col
mtch = headrow[i].className.match(/\bsorttable_([a-z0-9]+)\b/);
if (mtch) { override = mtch[1]; }
if (mtch && typeof sorttable["sort_"+override] == 'function') {
headrow[i].sorttable_sortfunction = sorttable["sort_"+override];
} else {
headrow[i].sorttable_sortfunction = sorttable.guessType(table,i);
}
// make it clickable to sort
headrow[i].sorttable_columnindex = i;
headrow[i].sorttable_tbody = table.tBodies[0];
dean_addEvent(headrow[i],"click", sorttable.innerSortFunction = function(e) {
if (this.className.search(/\bsorttable_sorted\b/) != -1) {
// if we're already sorted by this column, just
// reverse the table, which is quicker
sorttable.reverse(this.sorttable_tbody);
this.className = this.className.replace('sorttable_sorted',
'sorttable_sorted_reverse');
this.removeChild(document.getElementById('sorttable_sortfwdind'));
sortrevind = document.createElement('span');
sortrevind.id = "sorttable_sortrevind";
sortrevind.innerHTML = stIsIE ? '&nbsp<font face="webdings">5</font>' : ' ▴';
this.appendChild(sortrevind);
return;
}
if (this.className.search(/\bsorttable_sorted_reverse\b/) != -1) {
// if we're already sorted by this column in reverse, just
// re-reverse the table, which is quicker
sorttable.reverse(this.sorttable_tbody);
this.className = this.className.replace('sorttable_sorted_reverse',
'sorttable_sorted');
this.removeChild(document.getElementById('sorttable_sortrevind'));
sortfwdind = document.createElement('span');
sortfwdind.id = "sorttable_sortfwdind";
sortfwdind.innerHTML = stIsIE ? '&nbsp<font face="webdings">6</font>' : ' ▾';
this.appendChild(sortfwdind);
return;
}
// remove sorttable_sorted classes
theadrow = this.parentNode;
forEach(theadrow.childNodes, function(cell) {
if (cell.nodeType == 1) { // an element
cell.className = cell.className.replace('sorttable_sorted_reverse','');
cell.className = cell.className.replace('sorttable_sorted','');
}
});
sortfwdind = document.getElementById('sorttable_sortfwdind');
if (sortfwdind) { sortfwdind.parentNode.removeChild(sortfwdind); }
sortrevind = document.getElementById('sorttable_sortrevind');
if (sortrevind) { sortrevind.parentNode.removeChild(sortrevind); }
this.className += ' sorttable_sorted';
sortfwdind = document.createElement('span');
sortfwdind.id = "sorttable_sortfwdind";
sortfwdind.innerHTML = stIsIE ? '&nbsp<font face="webdings">6</font>' : ' ▾';
this.appendChild(sortfwdind);
// build an array to sort. This is a Schwartzian transform thing,
// i.e., we "decorate" each row with the actual sort key,
// sort based on the sort keys, and then put the rows back in order
// which is a lot faster because you only do getInnerText once per row
row_array = [];
col = this.sorttable_columnindex;
rows = this.sorttable_tbody.rows;
for (var j=0; j<rows.length; j++) {
row_array[row_array.length] = [sorttable.getInnerText(rows[j].cells[col]), rows[j]];
}
/* If you want a stable sort, uncomment the following line */
//sorttable.shaker_sort(row_array, this.sorttable_sortfunction);
/* and comment out this one */
row_array.sort(this.sorttable_sortfunction);
tb = this.sorttable_tbody;
for (var j=0; j<row_array.length; j++) {
tb.appendChild(row_array[j][1]);
}
delete row_array;
});
}
}
},
guessType: function(table, column) {
// guess the type of a column based on its first non-blank row
sortfn = sorttable.sort_alpha;
for (var i=0; i<table.tBodies[0].rows.length; i++) {
text = sorttable.getInnerText(table.tBodies[0].rows[i].cells[column]);
if (text != '') {
if (text.match(/^-?[�$�]?[\d,.]+%?$/)) {
return sorttable.sort_numeric;
}
// check for a date: dd/mm/yyyy or dd/mm/yy
// can have / or . or - as separator
// can be mm/dd as well
possdate = text.match(sorttable.DATE_RE)
if (possdate) {
// looks like a date
first = parseInt(possdate[1]);
second = parseInt(possdate[2]);
if (first > 12) {
// definitely dd/mm
return sorttable.sort_ddmm;
} else if (second > 12) {
return sorttable.sort_mmdd;
} else {
// looks like a date, but we can't tell which, so assume
// that it's dd/mm (English imperialism!) and keep looking
sortfn = sorttable.sort_ddmm;
}
}
}
}
return sortfn;
},
getInnerText: function(node) {
// gets the text we want to use for sorting for a cell.
// strips leading and trailing whitespace.
// this is *not* a generic getInnerText function; it's special to sorttable.
// for example, you can override the cell text with a customkey attribute.
// it also gets .value for <input> fields.
if (!node) return "";
hasInputs = (typeof node.getElementsByTagName == 'function') &&
node.getElementsByTagName('input').length;
if (node.getAttribute("sorttable_customkey") != null) {
return node.getAttribute("sorttable_customkey");
}
else if (typeof node.textContent != 'undefined' && !hasInputs) {
return node.textContent.replace(/^\s+|\s+$/g, '');
}
else if (typeof node.innerText != 'undefined' && !hasInputs) {
return node.innerText.replace(/^\s+|\s+$/g, '');
}
else if (typeof node.text != 'undefined' && !hasInputs) {
return node.text.replace(/^\s+|\s+$/g, '');
}
else {
switch (node.nodeType) {
case 3:
if (node.nodeName.toLowerCase() == 'input') {
return node.value.replace(/^\s+|\s+$/g, '');
}
case 4:
return node.nodeValue.replace(/^\s+|\s+$/g, '');
break;
case 1:
case 11:
var innerText = '';
for (var i = 0; i < node.childNodes.length; i++) {
innerText += sorttable.getInnerText(node.childNodes[i]);
}
return innerText.replace(/^\s+|\s+$/g, '');
break;
default:
return '';
}
}
},
reverse: function(tbody) {
// reverse the rows in a tbody
newrows = [];
for (var i=0; i<tbody.rows.length; i++) {
newrows[newrows.length] = tbody.rows[i];
}
for (var i=newrows.length-1; i>=0; i--) {
tbody.appendChild(newrows[i]);
}
delete newrows;
},
/* sort functions
each sort function takes two parameters, a and b
you are comparing a[0] and b[0] */
sort_numeric: function(a,b) {
aa = parseFloat(a[0].replace(/[^0-9.-]/g,''));
if (isNaN(aa)) aa = 0;
bb = parseFloat(b[0].replace(/[^0-9.-]/g,''));
if (isNaN(bb)) bb = 0;
return aa-bb;
},
sort_alpha: function(a,b) {
if (a[0]==b[0]) return 0;
if (a[0]<b[0]) return -1;
return 1;
},
sort_ddmm: function(a,b) {
mtch = a[0].match(sorttable.DATE_RE);
y = mtch[3]; m = mtch[2]; d = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt1 = y+m+d;
mtch = b[0].match(sorttable.DATE_RE);
y = mtch[3]; m = mtch[2]; d = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt2 = y+m+d;
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
},
sort_mmdd: function(a,b) {
mtch = a[0].match(sorttable.DATE_RE);
y = mtch[3]; d = mtch[2]; m = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt1 = y+m+d;
mtch = b[0].match(sorttable.DATE_RE);
y = mtch[3]; d = mtch[2]; m = mtch[1];
if (m.length == 1) m = '0'+m;
if (d.length == 1) d = '0'+d;
dt2 = y+m+d;
if (dt1==dt2) return 0;
if (dt1<dt2) return -1;
return 1;
},
shaker_sort: function(list, comp_func) {
// A stable sort function to allow multi-level sorting of data
// see: http://en.wikipedia.org/wiki/Cocktail_sort
// thanks to Joseph Nahmias
var b = 0;
var t = list.length - 1;
var swap = true;
while(swap) {
swap = false;
for(var i = b; i < t; ++i) {
if ( comp_func(list[i], list[i+1]) > 0 ) {
var q = list[i]; list[i] = list[i+1]; list[i+1] = q;
swap = true;
}
} // for
t--;
if (!swap) break;
for(var i = t; i > b; --i) {
if ( comp_func(list[i], list[i-1]) < 0 ) {
var q = list[i]; list[i] = list[i-1]; list[i-1] = q;
swap = true;
}
} // for
b++;
} // while(swap)
}
}
/* ******************************************************************
Supporting functions: bundled here to avoid depending on a library
****************************************************************** */
// Dean Edwards/Matthias Miller/John Resig
/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", sorttable.init, false);
}
/* for Internet Explorer */
/*#cc_on #*/
/*#if (#_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
sorttable.init(); // call the onload handler
}
};
/*#end #*/
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
sorttable.init(); // call the onload handler
}
}, 10);
}
/* for other browsers */
window.onload = sorttable.init;
// written by Dean Edwards, 2005
// with input from Tino Zijdel, Matthias Miller, Diego Perini
// http://dean.edwards.name/weblog/2005/10/add-event/
function dean_addEvent(element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = dean_addEvent.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = handleEvent;
}
};
// a counter used to create unique IDs
dean_addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else {
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
};
function handleEvent(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
}
// Dean's forEach: http://dean.edwards.name/base/forEach.js
/*
forEach, version 1.0
Copyright 2006, Dean Edwards
License: http://www.opensource.org/licenses/mit-license.php
*/
// array-like enumeration
if (!Array.forEach) { // mozilla already supports this
Array.forEach = function(array, block, context) {
for (var i = 0; i < array.length; i++) {
block.call(context, array[i], i, array);
}
};
}
// generic enumeration
Function.prototype.forEach = function(object, block, context) {
for (var key in object) {
if (typeof this.prototype[key] == "undefined") {
block.call(context, object[key], key, object);
}
}
};
// character enumeration
String.forEach = function(string, block, context) {
Array.forEach(string.split(""), function(chr, index) {
block.call(context, chr, index, string);
});
};
// globally resolve forEach enumeration
var forEach = function(object, block, context) {
if (object) {
var resolve = Object; // default
if (object instanceof Function) {
// functions have a "length" property
resolve = Function;
} else if (object.forEach instanceof Function) {
// the object implements a custom forEach method so use that
object.forEach(block, context);
return;
} else if (typeof object == "string") {
// the object is a string
resolve = String;
} else if (typeof object.length == "number") {
// the object is array-like
resolve = Array;
}
resolve.forEach(object, block, context);
}
};

Something like this would do the job (without using any libraries):
const tb=document.getElementById("homes"),
trs=[...tb.children];
document.body.onclick=ev=>{
let col= ev.target.dataset?.col;
if(col){
trs.sort((a,b)=>a.children[col].textContent-b.children[col].textContent);
trs.forEach(tr=>tb.append(tr));
}
}
<button data-col="1">sort by number</button>
<button data-col="2">sort by batting order</button>
<table class='table table-hover table-dark table-bordered sortable'>
<thead>
<tr>
<!-- <th>Picture</th> -->
<th>Name</th>
<th>Number</th>
<th>Batting Order</th>
<th>Action</th>
</tr>
</thead>
<tbody id="homes">
<tr>
<td>Harry</td>
<td>23</td>
<td>10</td>
<td>go</td>
</tr>
<tr>
<td>Sally</td>
<td>56</td>
<td>1</td>
<td>stop</td>
</tr>
<tr>
<td>Tony</td>
<td>11</td>
<td>2</td>
<td>wait</td>
</tr>
</tbody>
</table>

According to the documentation you simply need to add the "sortable" class to the table and add some css for their default style scheme like below. One step in troubleshooting is to remove all of the "fluff" and strip down your solution to the bare minimum. Below, for example, I've removed all of the other classes from the table as a test... it seems to be working fine and sorting appears to be giving the expected result.
To further debug your solution, add back those classes one at a time and see if/when the table stops working.
/* Sortable tables */
table.sortable thead {
background-color: #eee;
color: #666666;
font-weight: bold;
cursor: default;
}
<table class='sortable'>
<thead>
<tr>
<!-- <th>Picture</th> -->
<th>Name</th>
<th>Number</th>
<th>Batting Order</th>
<th>Action</th>
</tr>
</thead>
<tbody id="homes">
<tr>
<td>Player 1</td>
<td>10</td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>Player 2</td>
<td>1</td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>Player 3</td>
<td>2</td>
<td>5</td>
<td></td>
</tr>
<tr>
<td>Player 4</td>
<td>20</td>
<td>7</td>
<td></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
According to the documentation again, if your table is created dynamically at some point after page load you can use the .makeSortable(); function to make it sortable like this.
// populate the table with data before unitializing it.
let playerstable = document.getElementById("playerstable");
sorttable.makeSortable(playerstable);
/* Sortable tables */
/* removed ".sortable" */
table thead {
background-color: #eee;
color: #666666;
font-weight: bold;
cursor: default;
}
<!-- Note: Table does not have the sortable class -->
<table id="playerstable">
<thead>
<tr>
<!-- <th>Picture</th> -->
<th>Name</th>
<th>Number</th>
<th>Batting Order</th>
<th>Action</th>
</tr>
</thead>
<tbody id="homes">
<tr>
<td>Player 1</td>
<td>10</td>
<td>3</td>
<td></td>
</tr>
<tr>
<td>Player 2</td>
<td>1</td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>Player 3</td>
<td>2</td>
<td>5</td>
<td></td>
</tr>
<tr>
<td>Player 4</td>
<td>20</td>
<td>7</td>
<td></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>

How to sort by rows containing words and numbers in javascript

Newbie here how can I sort all of the following table row attach an onclick listener on the header after it is displayed.
ID
Name
Inventory Volume
1
Rachel
Data is not enough
2
Ross
100
3
Monica
1
4
Connor
Data is not enough
5
Dustin
-5
into this sorting example is in descending, the words should be the last.
ID
Name
Inventory Volume
2
Ross
100
3
Monica
10
5
Dustin
-5
1
Rachel
Data is not enough
4
Connor
Data is not enough
But I also want the other columns to be sorted as well and the other columns to have the function to sort as well.
Tried this solution but only works for the column.
https://jsfiddle.net/7wnke5q2/
function sortData(data, method) {
let lessData = 'Data Not Enough'
let lastItems = []
let sortedList;
if (method == 'descending') {
sortedList = data.sort((a, b) => {
return a - b
})
} else if (method == 'ascending') {
sortedList = data.sort((a, b) => {
return b - a
})
}
for (let i = 0; i < sortedList.length; i++) {
if (sortedList[i] == lessData) {
let item = sortedList[i]
sortedList.splice(i, 1)
sortedList.push(item)
}
}
sortedList = sortedList.concat(lastItems)
return sortedList
}
Could you please help me out. Thanks in advance!

If i understand, you need all "Data Not Enough" at the end. So, it can works:
function sortData(data, method) {
let lessData = 'Data Not Enough'
let sortedList;
sortedList = data.sort((a, b) => {
if(a=='Data Not Enough')
return 1
if(b=='Data Not Enough')
return -1
return method=='ascending'?a-b:b-a
})
return sortedList
}

something like that ?
just click on header columns to sort the table
const
myTableHead = document.querySelector('#my-table thead')
, myTableHead_TH = document.querySelectorAll('#my-table thead th')
, myTableBody = document.querySelector('#my-table tbody')
, myTableBody_TR = [...document.querySelectorAll('#my-table tbody tr')]
, sortOrder = ['','asc','desc']
, isDNE = str => str.trim() === 'Data is not enough'
;
myTableHead.onclick = ({target}) =>
{
if (!target.matches('th')) return
let idx = (sortOrder.findIndex(x=>x===target.className) +1) %3
myTableHead_TH.forEach(th=>th.className='')
target.className = sortOrder[idx]
if ( sortOrder[idx] )
{
myTableBody_TR
.sort(dynaSort(target.cellIndex, target.dataset.type, sortOrder[idx] ))
.forEach(tr=>myTableBody.appendChild(tr) )
}
}
function dynaSort( colIndex, colType, order='asc' )
{
let sortOrder = (order === 'desc') ? -1 : 1
return function(row_a,row_b)
{
let a = row_a.cells[colIndex].textContent
, b = row_b.cells[colIndex].textContent
;
if (isDNE(a) && isDNE(b)) return 0
if (isDNE(a)) return +1
if (isDNE(b)) return -1
if (colType==='str') return (a.trim().localeCompare(b.trim())) *sortOrder
return (Number(a) - Number(b)) *sortOrder
}
}
table {
border-collapse : collapse;
margin : 2em 1em;
font-family: Arial, Helvetica, sans-serif;
}
td,th {
padding : .2em .8em;
border : 1px solid darkblue;
}
th::after {
display : block;
float : inline-end;
content : '\25B7';
margin : 0 0 0 1em;
transition : 180ms;
color : transparent;
}
th.asc::after {
transform : rotate(-90deg);
color : whitesmoke;
}
th.desc::after {
transform : rotate(+90deg);
color : whitesmoke;
}
thead {
background : #437c97;
color : whitesmoke;
cursor : pointer;
}
<table id="my-table" >
<thead>
<tr>
<th data-type="num">ID</th>
<th data-type="str">Name</th>
<th data-type="num">Inventory Volume</th>
</tr>
</thead>
<tbody>
<tr> <td>1</td> <td>Rachel</td> <td>Data is not enough</td> </tr>
<tr> <td>2</td> <td>Ross</td> <td> 100 </td> </tr>
<tr> <td>3</td> <td>Monica</td> <td> 1 </td> </tr>
<tr> <td>4</td> <td>Connor</td> <td>Data is not enough</td> </tr>
<tr> <td>5</td> <td>Dustin</td> <td> -5 </td> </tr>
</tbody>
</table>

This should work! Using #YamirL sort alghoritm.
function sort(e, method) {
//Get table
while ((e = e.parentElement) && !e.classList.contains("table"));
//Get rows
let rows = Array.from(e.getElementsByTagName("tr"));
//Get each value for each row
let values = rows.map(row => {
let tds = Array.from(row.getElementsByTagName("td"));
return tds.map(td => td.innerHTML);
});
/*
values is a 2D array which contains each row and column
values = [
[Name, Volume], --> The headers need to be removed
[Joey, Data Not Enough],
[Ross, -5],
[Monica, 1],
[Ben, 100],
[Chandler, Data Not Enough]
];
*/
values.shift(); //remove headers
// Now we need to sort the array by volume
values.sort((a, b) => {
var exception = "Data Not Enough";
if(a[1] == exception)
return 1;
if(b[1] == exception)
return -1;
return method == 'ascending' ? a[1] - b[1] : b[1] - a[1];
});
/******* Put sort values on table *************/
// Get body
let body = e.getElementsByTagName("tbody")[0];
// Erase Body
body.innerHTML = "";
// Iterate each row
values.forEach(row => {
// Create new row element
let tr = document.createElement("tr");
// Iterate each column
row.forEach(val => {
// Create new value
let td = document.createElement("td");
// Append values
td.append(val);
tr.append(td);
});
// Append row to body
body.append(tr);
});
}
Here it is a snippet to try the complete code, I added a <tbody> to the table.
function sort(e, method) {
while ((e = e.parentElement) && !e.classList.contains("table"));
let rows = Array.from(e.getElementsByTagName("tr"));
let values = rows.map(row => {
let tds = Array.from(row.getElementsByTagName("td"));
return tds.map(td => td.innerHTML);
});
values.shift();
values.sort((a, b) => {
var exception = "Data Not Enough";
if(a[1] == exception)
return 1;
if(b[1] == exception)
return -1;
return method == 'ascending' ? a[1] - b[1] : b[1] - a[1];
});
let body = e.getElementsByTagName("tbody")[0];
body.innerHTML = "";
values.forEach(row => {
let tr = document.createElement("tr");
row.forEach(val => {
let td = document.createElement("td");
td.append(val);
tr.append(td);
});
body.append(tr);
});
}
.clickable {
cursor: pointer;
}
.clickable:hover {
opacity: 0.7;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" class="clickable" onclick='sort(this, "descending")'>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joey</td>
<td>Data Not Enough</td>
</tr>
<tr>
<td>Ross</td>
<td>-5</td>
</tr>
<tr>
<td>Monica</td>
<td>1</td>
</tr>
<tr>
<td>Ben</td>
<td>100</td>
</tr>
<tr>
<td>Chandler</td>
<td>Data Not Enough</td>
</tr>
</tbody>
</table>

Sort HTML table ignoring articles ("a," "an" "the") just using javascript

I put together an HTML table of books that I need sort ignoring "a," "an," and "the." I also need to ignore non-alphanumeric characters like quotation marks (like if the title is something like [ "Boo": A Collection of Horror Stories ]).
I've found some examples of how to sort out articles from strings. But my table data is hard-coded into the HTML. And for context, I'm working within a CMS and can't use JSON or JQUERY.
Here's the snippet.
<style>
table.sash-table {
}
table.sash-table th {
cursor: pointer;
position: sticky;
top: 0px;
background: white;
}
table.sash-table th, td {
text-align: left;
padding: 16px;
}
table.sash-table tr:nth-child(even) {
background-color: #f2f2f2
}
table.sash-table th:hover {
color:lightgray;
}
</style>
<script>
function sortTable(n) {
const closestTable = event.target.closest("table");
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById(closestTable.id);
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 1; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/* If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
<html>
<table id="table-1906-1988" class="sash-table">
<tbody style="height: 500px; display: block; overflow-y: auto;">
<tr>
<th class="year" onclick="sortTable(0)">Year</th>
<th class="title" onclick="sortTable(1)">Title</th>
<th class="authors" onclick="sortTable(2)">Author(s)</th>
</tr>
<tr>
<td>1906</td>
<td>Salt Glazed Stoneware Germany, Flanders, England and the United States</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1906</td>
<td>Tin Enameled Potter: Maiolica, Delft and Other Stanniferous Faience</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1907</td>
<td>Lead glazed pottery, part first (common clays) plain glazed, sgraffito and slip-decorated wares</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1907</td>
<td>Artificial Soft Paste Porcelain: France, Italy, Spain and England</td>
<td>Barber, Edwin Atlee</td>
<tr>
<td>1908</td>
<td>The Maiolica of Mexico</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1910</td>
<td>Hard Paste Porcelain (Oriental): China, Japan, Siam, Korea</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1913</td>
<td>Catalogue of a collection of paintings and some art objects (John G. Johnson Collection - Vol. I-III)</td>
<td>Johnson, John Graver</td>
</tr>
<tr>
<td>1913</td>
<td>The W.P. Wilstach Collection</td>
<td>Bye, Arthur Edwin</td>
</tr>
</table>
Thanks much!

const removedString = string.replace(/^(a|an|the)(\s)/i, '');
This removes any a, an, the at the beginning of the string.
Edit this part of your code
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
const xValue = x.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();
const yValue = y.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();
if (dir == "asc") {
if (xValue > yValue) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (xValue < yValue) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
<style>
table.sash-table {
}
table.sash-table th {
cursor: pointer;
position: sticky;
top: 0px;
background: white;
}
table.sash-table th, td {
text-align: left;
padding: 16px;
}
table.sash-table tr:nth-child(even) {
background-color: #f2f2f2
}
table.sash-table .year {
width:5%;
}
}
table.sash-table .authors {
width:17.5%;
}
table.sash-table .title {
width:38.5%;
}
table.sash-table .catalog {
width:12.5%;
}
table.sash-table .fulltext {
width:13.5%;
}
table.sash-table .genre {
width:12.5%;
}
table.sash-table th:hover {
color:lightgray;
}
</style>
<script>
function sortTable(n) {
const closestTable = event.target.closest("table");
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById(closestTable.id);
switching = true;
// Set the sorting direction to ascending:
dir = "asc";
/* Make a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is done:
switching = false;
rows = table.rows;
/* Loop through all table rows (except the
first, which contains table headers): */
for (i = 1; i < (rows.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Get the two elements you want to compare,
one from current row and one from the next: */
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/* Check if the two rows should switch place,
based on the direction, asc or desc: */
const xValue = x.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();
const yValue = y.innerHTML.replace(/^(a|an|the)(\s)/i, '').toLowerCase();
if (dir == "asc") {
if (xValue > yValue) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (xValue < yValue) {
// If so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/* If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
<html>
<table id="table-1906-1988" class="sash-table">
<tbody style="height: 500px; display: block; overflow-y: auto;">
<tr>
<th class="year" onclick="sortTable(0)">Year</th>
<th class="title" onclick="sortTable(1)">Title</th>
<th class="authors" onclick="sortTable(2)">Author(s)</th>
</tr>
<tr>
<td>1906</td>
<td>Salt Glazed Stoneware Germany, Flanders, England and the United States</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1906</td>
<td>Tin Enameled Potter: Maiolica, Delft and Other Stanniferous Faience</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1907</td>
<td>Lead glazed pottery, part first (common clays) plain glazed, sgraffito and slip-decorated wares</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1907</td>
<td>Artificial Soft Paste Porcelain: France, Italy, Spain and England</td>
<td>Barber, Edwin Atlee</td>
<tr>
<td>1908</td>
<td>The Maiolica of Mexico</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1910</td>
<td>Hard Paste Porcelain (Oriental): China, Japan, Siam, Korea</td>
<td>Barber, Edwin Atlee</td>
</tr>
<tr>
<td>1913</td>
<td>Catalogue of a collection of paintings and some art objects (John G. Johnson Collection - Vol. I-III)</td>
<td>Johnson, John Graver</td>
</tr>
<tr>
<td>1913</td>
<td>The W.P. Wilstach Collection</td>
<td>Bye, Arthur Edwin</td>
</tr>
</table>

Unable to access local variable

Function:
There's a table of fruits (apple, banana) and their colors (red, yellow).
Requirement:
Find a fruit, output its color. If no fruit exists, "no fruit was found".
Problem:
The first result is correct ("pear" is not in the table), but subsequent ones are wrong ("pear is red?").
I tried declaring the color variable locally using var color or let color instead of global and that didn't work. I think the scope or test condition I'm using is wrong.
¯\_(ツ)_/¯
function findFruitColor(table, fruit) {
let colKey = $(table).find("th:contains('Fruit')").index();
let colVal = $(table).find("th:contains('Color')").index();
$(table).find('tr td:nth-child(' + (colKey + 1) + ')').each(function() {
if ($(this).text() === fruit) {
color = $(this).siblings('td').addBack().eq(colVal).text();
return false;
}
})
// if color was found, display it.
if (typeof color !== 'undefined') {
console.log("The color for " + fruit + " is " + color);
} else {
console.log("No fruit matching that name was found.");
}
}
// Call the function
findFruitColor("#myTable", "pear");
findFruitColor("#myTable", "apple");
findFruitColor("#myTable", "pear");
th {
font-weight: bold;
width: 4em;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table id="myTable">
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
<tr>
<td>apple</td>
<td>red</td>
</tr>
<tr>
<td>banana</td>
<td>yellow</td>
</tr>

Because color is global variable so it still be "red" after you run findFruitColor("#myTable", "apple");. To solve it, you just need to declare it as local variable of findFruitColor. Something like this:
function findFruitColor(table, fruit) {
let colKey = $(table).find("th:contains('Fruit')").index();
let colVal = $(table).find("th:contains('Color')").index();
// Declare color here
let color;
$(table).find('tr td:nth-child(' + (colKey + 1) + ')').each(function() {
if ($(this).text() === fruit) {
color = $(this).siblings('td').addBack().eq(colVal).text();
return false;
}
})
// if color was found, display it.
if (typeof color !== 'undefined') {
console.log("The color for " + fruit + " is " + color);
} else {
console.log("No fruit matching that name was found.");
}
}
// Call the function
findFruitColor("#myTable", "pear");
findFruitColor("#myTable", "apple");
findFruitColor("#myTable", "pear");
th {
font-weight: bold;
width: 4em;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table id="myTable">
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
<tr>
<td>apple</td>
<td>red</td>
</tr>
<tr>
<td>banana</td>
<td>yellow</td>
</tr>

#Cuong Le Ngoc's answer definitely satisfies the base question of "why doesn't this code work?", but have you considered a simpler solution to begin with? At this scale, just loop each row and compare its first column's value to the desired fruit, outputting the associated color to the console:
function findFruitColor(table, fruit) {
let rows = $("#myTable").find("tr");
for (var i = 1; i < rows.length; i++) {
let currentRow = $(rows[i]).find("td");
if (currentRow[0].innerText == fruit) {
console.log("The color for " + fruit + " is " + currentRow[1].innerText);
return;
}
}
console.log("No fruit matching the name " + fruit + " was found");
}
// Call the function
findFruitColor("#myTable", "pear");
findFruitColor("#myTable", "apple");
findFruitColor("#myTable", "pear");
th {
font-weight: bold;
width: 4em;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table id="myTable">
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
<tr>
<td>apple</td>
<td>red</td>
</tr>
<tr>
<td>banana</td>
<td>yellow</td>
</tr>
</table>

assign variable to an individual table cell

I am trying to put images in a table. I have that working, if you click, you cycle through the available options. However, the counter is not cell related, it is a global counter. Is there a way to make a local variable, to keep track of where that individual cell is in the array?
I have tried making a local variable, only to a single cell, but it wasn't working.
Here is the related function in js:
var i = 1;
var table = document.getElementsByTagName('table')[0];
var def = ["tex/white.png", "tex/grass.jpg", "tex/stone.jpg", "tex/water.jpg", "tex/wood.jpg", "tex/lava.jpg"];
table.onclick = function(e) {
var target = (e || window.event).target;
if (target.tagName in { TD: 1, TH: 1 }) {
target.className = "img";
console.log((e || window.event).target);
target.setAttribute('style', 'background-image:' + "url(" + def[i] + ")");
if (i < def.length) {
i++
}
if (i == def.length) {
i = 0;
}
}
};
Here is a working fiddle of what I have done so far:
https://jsfiddle.net/6L0armd4/
The desired result is that I start the array at single cells and it only counts for those cells. At the moment, it always gives the next texture, even when I select a different cell.

A possible solution : using ids to identify each cells, and an object to keep track of which background is currently used for each cells (using their id as key)
<html>
<head>
</head>
<body>
<table>
<tr>
<td id='1'></td>
<td id='2'></td>
<td id='3'></td>
</tr>
<tr>
<td id='4'></td>
<td id='5'></td>
<td id='6'></td>
</tr>
<tr>
<td id='7'></td>
<td id='8'></td>
<td id='9'></td>
</tr>
</table>
</body>
</html>
<script>
var table = document.getElementsByTagName('table')[0];
var def = ["https://cdn1.imggmi.com/uploads/2019/6/19/5e4aedcf566fa5e4501ab584d357be01-full.jpg", "https://cdn1.imggmi.com/uploads/2019/6/19/3d39445ffda6687a6b0e80a69a35fdea-full.jpg"];
var currents = {}
getNextIndex = function(index) {
return index === undefined || index >= def.length - 1 ? 0 : index + 1
}
table.onclick = function(e) {
var target = (e || window.event).target;
if (target.tagName in { TD: 1, TH: 1 }) {
var new_bg_index = getNextIndex(currents[target.id])
currents[target.id] = new_bg_index
target.setAttribute('style', 'background-image:' + "url(" + def[new_bg_index] + ")");
}
};
</script>

you need to make listener event
you may change the color codes to your image path on the below code and avoid any local path image links issue try to use online images direct ones .
var table = document.querySelector('#table')
var selectedCells = table.getElementsByClassName('selected')
table.addEventListener('click', function(e) {
var td = e.target
if (td.tagName !== 'TD') {
return
}
if (selectedCells.length) {
selectedCells[0].className = ''
}
td.className = 'selected'
})
table {
cursor: text;
}
tr {
background-color:white;
}
td {
font-size: 14;
cursor: default;
}
td.selected {
background-color: red;
// replace this with background image tag like this
background-image: url("paper.gif
<table border="1" cellpadding="8" cellspacing="2" id="table">
<tr>
<td>Cell one</td>
<td>Cell Tw</td>
<td>Cell three</td>
<td>Cell Four</td>
<td>Cell five</td>
<td>Cell sex</td>
<td>Cell five</td>
<td>cell seven</td>
<td>cell eight</td>
<td>cell nine</td>
<td>cell tens</td>
<td>cell eleven</td>
<td>cell twelve</td>
</tr>
<tr>
<td>AKo</td>
<td>KK</td>
<td>KQs</td>
<td>KJs</td>
<td>KTs</td>
<td>K9s</td>
<td>K8S</td>
<td>K7s</td>
<td>K6s</td>
<td>K5s</td>
<td>K4s</td>
<td>K3s</td>
<td>K2s</td>