JSFiddle - React, Tailwind, and code Playground

by WinKiFlyMe

HTML

<table border="1">
        <tr>
            <td>00</td>
            <td>01</td>
            <td>02</td>
            <td>03</td>
            <td>04</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>30</td>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>40</td>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

JavaScript

$(function(){
    $("td").mouseenter(function(){    //移入
        var t = $(this).parents("table").get(0);
        var rows = t.rows;
        for(var i=0;i<rows.length;i++){
            $(rows[i].cells[this.cellIndex]).css("background-color","#ABCDEF");
        }
    }).mouseleave(function(){        //移出
        var t = $(this).parents("table").get(0);
        var rows = t.rows;
        for(var i=0;i<rows.length;i++){
            $(rows[i].cells[this.cellIndex]).css("background-color","#FFFFFF");
        }
    }).click(function(){
        $(this).html("up");
    });
});