JSFiddle - React, Tailwind, and code Playground

HTML

<table border=1>
    <tr>
        <td>Foo</td>
        <td>x</td>
        <td>1x</td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td>2x</td>
    </tr>
    <tr>
        <td> </td>
        <td></td>
        <td>3x</td>
    </tr>
    <tr>
        <td> </td>
        <td>y</td>
        <td>1y</td>
    </tr>
    <tr>
        <td> </td>
        <td> </td>
        <td>2y</td>
    </tr>
    <tr>
        <td>Bar</td>
        <td>z</td>
        <td>1z</td>
    </tr>
    <tr>
        <td> </td>
        <td>u</td>
        <td>1u</td>
    </tr>
</table>

JavaScript

function spanRow(column) {
    var categoryColumn = $("table tr td:nth-child(" + column +")");
    var rowspan = 1;
    var lastElement = categoryColumn.first();
    categoryColumn.each(function () {
        var element = $(this);
        if ($.trim(element.html()) == '') {
            element.remove();
            rowspan++;
        } else {
            lastElement.attr("rowspan", rowspan);
            lastElement = element;
            rowspan = 1;
        }
    });
    lastElement.attr("rowspan", rowspan);
}


spanRow(2);
spanRow(1);