JSFiddle - React, Tailwind, and code Playground

by David Thomas

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

$(".ordinal").text(function (i, t) {
        i++;
        var str = i.toString().slice(-1),
            ord = '';
        switch (str) {
            case '1':
                ord = 'st';
                break;
            case '2':
                ord = 'nd';
                break;
            case '3':
                ord = 'rd';
                break;
            case '4':
            case '5':
            case '6':
            case '7':
            case '8':
            case '9':
            case '0':
                ord = 'th';
                break;
        }
        return i + ord;
    });