Javascript 使用java脚本构建嵌套表

我有一个现有的嵌套HTML表，其代码如下所示，我正在尝试仅使用JS重建该表。如果表是平面的，我可以这样做，但是我不知道如何用JS重建这个示例HTML表。我这里的主要问题是JS代码，如果您从HTML示例代码中看到，我有

标题A

，我可以在JS代码中这样做，但我正在努力解决的部分是我称为

标题B

的表部分和

标题B

的相应输入

这是我现有的表代码，我正试图找出如何仅通过JS创建

标题A
标题A
标题A
标题A
投入1.A
投入1.A
投入1.A
标题B
标题B
标题B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入2.A
投入2.A
投入2.A
标题B
标题B
标题B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B

如果表是平面的，我可以创建它，但是由于它的嵌套部分，我遇到了一些麻烦。这里是我从JS方面得到的，虽然不多，但正如我提到的，我有点困惑如何做，因为它是嵌套的

$（'table'）.hide（）；
变量$table=$（''）；
$table.append（）
//泰德
.append（“”）.children（'thead'））
.append（“”）.children（'tr'）.append（'HEADING A\
标题A\
标题A\
标题A\
');
//向DOM添加表
$table.appendTo（“#dynamicTable”）；//创建表格

首先尝试在jquery中重新创建表，然后将其附加到目标行target td上

有关示例，请参见代码片段

$（文档）.ready（函数（）{
变量dynamicTable=$（“”）
.append（$（“”）.文本（“标题B”））
.append（$（“”）.文本（“标题B”））
.append（$（“”）.文本（“标题B”））
$。每个（[1,2,3]，函数（索引，值）{
变量dynamicCrow=$（“”）
.append（$（“”）.text（“输入1.B”））
.append（$（“”）.text（“输入1.B”））
.append（$（“”）.text（“输入1.B”））
$（dynamicTable）.append（dynamiccrow）
}) 
变量行=$（“”）
.append（$（“”）.text（“输入1.A”））
.append（$（“”）.text（“输入1.A”））
.append（$（“”）.text（“输入1.A”））
.append（$（“”）.append（可动态添加））
$（“#示例>tbody”）.append（行）
})

.row{
背景#f8f9fa；
边缘顶部：20px；
}
上校{
边框：实心1px#6c757d；
填充：10px；
}

标题A
标题A
标题A
标题A
投入1.A
投入1.A
投入1.A
标题B
标题B
标题B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B
投入1.B

使用createElement

---

当然，您也可以通过操作元素变量来设置任何其他属性。

我构建了一个简单的算法，使用jQuery动态生成表。这不是最好的算法，但只是一个开始

我希望它对你有用

$（文档）.ready（函数（）{
函数getHeading（文本）
{
返回$（“”）
.append（$（''）.text（text））
.append（$（''）.text（text））
.append（$（''）.text（text））
.append（$（''）.text（text））；
}
函数getInput（文本）
{
返回$（''）。追加(
$（''）.text（text）
).附加(
$（''）.text（text）
).附加(
$（''）.text（text）
);
}
函数getX（输入，标题）
{
var subTable=$（“”，{“类”：“表”}）
.附加(
$（''）。追加(
$（''）.text（标题）
).附加(
$（''）.text（标题）
).附加(
$（''）.text（标题）
)
).append（getInput（'INPUT 1.B'））
.append（getInput（'INPUT 1.B'））
.append（getInput（'INPUT 1.B'））；
var tr=$（''）
.append（$（''）.text（输入））
.append（$（''）.text（输入））
.append（$（''）.text（输入））
.append（$（''）.append（子表））；
返回tr；
}
变量表=$（“”，{“类”：“表”}）；
表=表
.append（getHeading（'HEADING A'））
.append（getX（'INPUT 1.A'，'HEADING B'））
.append（getX（'INPUT 2.A'，'HEADING B'））；
$（'body'）。追加（表）；
});<table id="example" class="table table-striped">
    <thead>
        <tr>
            <th>HEADING A </th>
            <th>HEADING A</th>
            <th>HEADING A</th>
            <th>HEADING A</th>
        </tr>
    </thead>


    <tbody>

        <tr>
            <td >INPUT 1.A</td>
            <td >INPUT 1.A</td>
            <td>INPUT 1.A</td>

            <td>
                <table id="example1" class="table table-nostriped">
                      <th>HEADING B</th>
                       <th>HEADING B</th>
                       <th>HEADING B</th>
                    <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                    </tr>
                   <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                  </tr>
                   <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                  </tr>
                </table>
            </td>
            </tr>
            <!-- Second table entry here -->
            <tr>
            <td >INPUT 2.A</td>
            <td >INPUT 2.A</td>
            <td>INPUT 2.A</td>

            <td>
                <table id="example1" class="table table-nostriped">
                      <th>HEADING B</th>
                       <th>HEADING B</th>
                       <th>HEADING B</th>
                    <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                    </tr>
                   <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                  </tr>
                   <tr>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>
                         <td>INPUT 1.B</td>   
                  </tr>

                </table>
            </td>
            </tr>


    </tbody>
</table>

let table = document.createElement('table')
let head = document.createElement('thead')
let th = document.createElement('th')
th.innerHTML = 'Content of TH'
head.append(th)
let body = document.createElement('tbody')
let tr = document.createElement('tr')
let td = document.createElement('td')
td.innerHTML = 'content of TD'
tr.append(td)
body.append(tr)
table.append(head)
table.append(body)
document.querySelector('#dynamicTable').append('table')