JSFiddle - React, Tailwind, and code Playground

by igalst

HTML

<button type="button" id="multiplieButton">Fill in Multiplication table</button>
    
<table border="1" id="multiplicationTable">
    <tr>
        <td>x</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>3</td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS

td {
    width: 20px;
    height: 20px;
    text-align: center;
}

td:hover {
    background: yellow;
}

JavaScript

$("#multiplieButton").click(function () {
    var row;
    var td;
    var x;
    var y;
    
    var table = $("#multiplicationTable");
    
    var top = table.find("tr:first-child").find("td");
    var left = table.find("td:first-child");
    
    for (var i = 1; i < left.length; i++) {
        tr = table.find("tr").eq(i);
        console.log("tr", i, tr);
        
        for (var j = 1; j < top.length; j++) {
            td = tr.find("td").eq(j);
            console.log("td", j, td);
            
            x = top.eq(j).text();
            y = left.eq(i).text();
            
            //console.log("x", x);
            //console.log("y", y);
            
            td.text(x * y);
        }
    }
    
    // console.log(top);
    // console.log(left);
});