JSFiddle - React, Tailwind, and code Playground

HTML

<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>

JavaScript

function getTextFromHeading(e) {
        var e = e || window.event,
            target = e.target || e.srcElement,
            text = target.textContent || target.innerText;  
            
        if (target.tagName.toLowerCase() === 'th') {
            alert(text);
        }
    }

    (function() {
        var table = document.getElementsByTagName('table');
        if (table[0].addEventListener) {
            table[0].addEventListener('click', getTextFromHeading);
        } else if (table[0].attachEvent) {
            table[0].addEventListener('onclick', getTextFromHeading);
        }
    }());