JSFiddle - React, Tailwind, and code Playground

by Joe Young

HTML

<div id="grid">
<table>
    <tbody>
        <tr>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
        </tr>

        <tr>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
        </tr>
        
        <tr>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
        </tr>
        
        <tr>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
        </tr>

        <tr>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
        </tr>
        
        <tr>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
            <td>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </td>
        </tr>        
   ...

CSS

a {
    margin: 10px;
}

JavaScript

var links = document.getElementById("grid").getElementsByTagName("a");	//get every anchor tag in #grid div
    for(var i = 0; i < links.length; i++) {		//loop through every anchor tag tag
        var link = links[i];
        link.onclick = function(e) {	//add an event handler to each anchor tag
            e.preventDefault();			//prevent the default action from happening, e.g. the href
            alert("Link clicked!");		//do whatever
        }
    }