JSFiddle - React, Tailwind, and code Playground

HTML

<table id="inventorytable">
    <tr>
        <th>Processor Speed</th>
        <th>Amount of RAM</th>
    </tr>
    <tr>
        <td>2.0</td>
        <td>3.0</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>4.0</td>
    </tr>
</table>

<table id="inventorytableFilter">
    <thead>
        <tr>
            <th>Processor Speed</th>
            <th>Amount of RAM</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2.0</td>
            <td>3.0</td>
        </tr>
        <tr>
            <td>3.2</td>
            <td>4.0</td>
        </tr>
    </tbody>
</table>

<table id="tableDOM">
    <thead>
        <tr>
            <th>Processor Speed</th>
            <th>Amount of RAM</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2.0</td>
            <td>3.0</td>
        </tr>
        <tr>
            <td>3.2</td>
            <td>4.0</td>
        </tr>
    </tbody>
</table>

<table id="ex4">
    <tr>
        <th>Processor Speed</th>
        <th>Amount of RAM</th>
    </tr>
    <tr>
        <td>2.0</td>
        <td>3.0</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>4.0</td>
    </tr>
</table>

CSS

.test { background: red; }
table { margin-bottom: 20px; }

JavaScript

var tds = document.getElementById('inventorytable').getElementsByTagName('td'),
    numOfTds = tds.length;
for (var i = 0; i < numOfTds; i++) {
    tds[i].innerHTML += ' Order of processing ' + i + ' ';
    tds[i].className = 'test';
}

//ex2: Filtering td's
tds =document.getElementById('inventorytableFilter')
        .getElementsByTagName('tbody')[0]
        .getElementsByTagName('td'),
    numOfTds = tds.length;
for (var i = 0; i < numOfTds; i++) {
    tds[i].innerHTML += ' Order of processing ' + i + ' ';
    tds[i].className = 'test';
}

//ex3: Filtering td's using built-in table dom traversal
var rows =document.getElementById('tableDOM').tBodies[0].rows,
    numOfRows = rows.length;
for (var i = 0; i < numOfRows ; i++) {
    for (var j = 0; j < rows[i].cells.length; j++) {
        rows[i].cells[j].innerHTML += ' Order of processing ' + i + ' ';
        rows[i].cells[j].className = 'test';
    }
}

//ex4: ex2+ex3
tds =document.getElementById('ex4')
        .tBodies[0]
        .getElementsByTagName('td'),
    numOfTds = tds.length;
for (var i = 0; i < numOfTds; i++) {
    tds[i].innerHTML += ' Order of processing ' + i + ' ';
    tds[i].className = 'test';
}