JSFiddle - React, Tailwind, and code Playground

by Graham Fairweather

HTML

<table>
    <theader>
        <tr>
            <th>Mesages A</th>
            <th>Mesages B</th>
        </tr>
    </theader>
    <tbody>
        <tr>
            <td class="profile-messages">Message1</td>
            <td class="profile-messages">Message2</td>
        </tr>
        <tr>
            <td class="profile-messages">Message3</td>
            <td class="profile-messages">Message4</td>
        </tr>
        <tr>
            <td class="profile-messages">Message5</td>
            <td class="profile-messages">Message6</td>
        </tr>
    </tbody>
</table>

CSS

.profile-messages {
    background-color: red;
}
.done {
    background-color: blue;
}

JavaScript

document.addEventListener("click", function (evt) {
    if (evt.target.tagName.toUpperCase() === "TD" && evt.target.classList.contains("profile-messages")) {
        evt.target.classList.add("done");
    }
}, false);