JSFiddle - React, Tailwind, and code Playground

by uwe_guenther

HTML

<table id='outerTable'>
    <tr>
        <td>StartContent1</td>
        <td>
            <table>
                <tr>
                    <td>StartContent2</td>
                    <td>StartContent3</td>
                </tr>
            </table>
        </td>
    </tr>   
    <tr>
        <td><a href="#" onclick="loadPane();">Link</a></td>
        <td>
            <div id='pane'>
                <table id='innerTable'>
                    <tr>
                        <td>StartContent4</td>
                        <td>StartContent5</td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>

JavaScript

function loadPane() {
    var pane = document.getElementById('pane')
    pane.innerHTML= '<table id="newInnerTable"><tr><td>Two columns worth of expanded content</td></tr></table>';
};