JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<table id="tbl" class="full-screen">
    <tr>
        <td>foo</td>
        <td>1</td>
        <td>
            <img src="http://s15.postimg.org/itup3wvif/image.jpg" class="delete-button" />
        </td>
    </tr>
    <tr>
        <td>bar</td>
        <td>2</td>
    </tr>
    <tr>
        <td>blub</td>
        <td>3</td>
    </tr>
</table>

CSS

.full-screen {
    width: 100%;
    height: 100%;
}
.clickable {
    cursor: pointer;
    background-color: orange;
}

JavaScript

$("#tbl tr").hover(function () {
    $(this).toggleClass("clickable");
}).click(function () {
    alert("row click");
});
$(".delete-button").click(function (e) {
    alert("delete-button click");
    e.stopPropagation();
});