jQuery event.target demo

by darkk6

HTML

<font size=+1 id="msg"></font><br>
<table id=mainTable border=1>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
</table>

CSS

td{
    width:50px;
    height:50px;
    text-align:center;
    cursor:pointer;
}

td.highlight{
    background-color:#FFFF70;
}

JavaScript

$("table").mouseover(function(event){
    var td=event.target;
    if(td.tagName.toLowerCase()=='td'){
        $("#msg").text($(td).text());
        $(td).toggleClass("highlight");
    }
});

$("table").mouseout(function(event){
    var td=event.target;
    if(td.tagName.toLowerCase()=='td'){
        $("#msg").text($(td).text());
        $(td).toggleClass("highlight");
    }
});