JSFiddle - React, Tailwind, and code Playground

by csharp72

HTML

<table>
    <tr>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
    </tr>
    <tr>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
    </tr>
    <tr>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
    </tr>
    <tr>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
    </tr>
    <tr>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
    </tr>
    <tr>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td class="ordinal"></td>
        <td...

JavaScript

Number.prototype.ordinate = function(){
    var num = this,
        ones = num % 10,
        tens = num % 100,
        ord = ["st","nd","rd"][ tens > 10 && tens < 20 ? null : ones-1 ] || 'th';
    return num.toString() + ord;
};

$(".ordinal").text(function (i, t) {
    return (++i).ordinate();
});