如何在jQuery中设计动态变化的表结构？

Question

我正在设计一个主表A，它有一个与之关联的子表B，B有一个与之关联的子表C，C最后有两个与之关联的子表，它们是D和E.

结构如下：

如果用户点击B上的“+”，则必须另外添加表B，C和D和E.如果用户单击E上的“+”符号，则只能添加表E.下面是代码，它接受表ID并向现有表添加一行。我能够让E表添加额外的行，但这里是我试图找出如何添加整个表结构的位置，基于用户单击要添加的'+'符号的表或' - '删除。

function addRow(tableID) {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;

    for (var i = 0; i < colCount; i++) {
        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch (newcell.childNodes[0].type) {
            case "text":
                newcell.childNodes[0].value = "";
                break;
            case "checkbox":
                newcell.childNodes[0].checked = false;
                break;
            case "select-one":
                newcell.childNodes[0].selectedIndex = 0;
                break;
        }
    }
}