JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>

</head>

<body>

<table border="1" cellspacing="1" width="500">
    <tr>
        <th>FRUITS</th>
        <th>COLORS</th>
        <th>VEGGIES</th>
        <th>NUMBERS</th>
    </tr>
    <tr>
        <td>apples</td>
        <td>red</td>
        <td>carrots</td>
        <td>123</td>
    </tr>
    <tr>
        <td>oranges</td>
        <td>blue</td>
        <td>celery</td>
        <td>456</td>
    </tr>
    <tr>
        <td>pears</td>
        <td>green</td>
        <td>brocoli</td>
        <td>789</td>
    </tr>
    <tr>
        <td>mangos</td>
        <td>yellow</td>
        <td>lettuce</td>
        <td>098</td>
    </tr>
</table>

</body>

</html>

JavaScript

var titles = document.getElementsByTagName("th");

for ( var i = 0; i< titles.length; i++ ) {   
    titles[i].addEventListener("click", function() {
        alert( this.innerHTML );
    }, false);
}