JSFiddle - React, Tailwind, and code Playground

by Oleg Kiriljuk

HTML

<table id="my-table">
    <tr>
        <td><span>1</span></td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td><span>6</span></td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

CSS

table {
    margin-top: 25px;
    margin-left: 25px
}
td {
    width: 40px;
    padding-left: 20px;
    border-right: solid thin green;
}

JavaScript

var columnIndexesIgnore = [0, 3];
$('#my-table').on('click', function (e) {
    var $td = $(e.target).closest("td"); // e.target can be <span> instead of `<td>`
    if ($td.length > 0 && $.inArray($td[0].cellIndex, columnIndexesIgnore) < 0) {
        // cellIndex is 0-based index. We display in alert 1-based column index
        alert("I've been clicked on column " + ($td[0].cellIndex + 1) + "!");
    }
});