JSFiddle - React, Tailwind, and code Playground

by arian

HTML

<table id="wrapper">
    <tr>
        <td class="click">Click Me</td>
        <td>Cannot click me</td>
    </tr>
    <tr>
        <td class="click">Click Me</td>
        <td>Cannot click me</td>
    </tr>
    <tr>
        <td class="click">Click Me</td>
        <td>Cannot click me</td>
    </tr>
</table>

<pre id="result"></pre>

CSS

#wrapper td {
    border: 1px solid black;
    padding: 5px;
}

a {
    display: block;
    padding: 10px;
    font-size: 2em;
    background: #f00;
    margin: 10px;
}

JavaScript

var result = document.id('result');

document.id('wrapper').addEvent('click:relay(tr td.click)', function(event){
    result.appendText('clicked a td.click element\n');
    this.highlight();
});