How to Sort HTML Tables with JavaScript: A Comprehensive Solution

Sorting HTML Tables with JavaScript: A Simple Solution Revisited

Finding a suitable table sorting solution in JavaScript can be a challenge. You may need to sort columns alphabetically, including numbers, but without ignoring specific characters or handling currency.

Fortunately, there's a straightforward and effective JavaScript solution that can help:

Plain JavaScript (ES6):

• Supports both alpha and numeric sorting in ascending and descending order
• Works in Chrome, Firefox, Safari, and even IE11

Implementation Details:

1. Add a click event listener to each table header cell (th).
2. Retrieve all table rows (except the first one) for the table.
3. Sort the rows based on the value of the clicked column.
4. Reinsert the sorted rows back into the table.

Code Snippet:

<code class="javascript">const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
    v1 !== '' &amp;&amp; v2 !== '' &amp;&amp; !isNaN(v1) &amp;&amp; !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));

document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() => {
    const table = th.closest('table');
    Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
        .sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
        .forEach(tr => table.appendChild(tr) );
})));</code>

Styling:

Add the following CSS to style the table and make the header cells clickable:

<code class="css">table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}</code>

Usage:

Include the JavaScript and CSS in your HTML document and add a table with header cells and data rows.

Example:

<code class="html"><table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
    <tr><td><a href="#">spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
    <tr><td><b>Lebanon</b></td><td><a href="#">2002-02-02</a></td><td><b>-17</b></td></tr>
    <tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href="#">100</a></td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table></code>

Conclusion:

With this simple and efficient JavaScript solution, you can easily sort HTML tables with a click of a column header, regardless of the data type.

The above is the detailed content of How to Sort HTML Tables with JavaScript: A Comprehensive Solution. For more information, please follow other related articles on the PHP Chinese website!