用于将DOM元素转换为HTML表的JS模板解决方案

Question

我正在开发一个项目，该项目具有基于JSON数据动态生成的普通HTML内容。实际上，当这个问题发挥作用时，我无法访问JSON数据。我需要获取DOM中的HTML，梳理它，并创建一个＆＃34;表视图＆＃34;页面上内容的模式。如果重要的话，这些表将彼此嵌套并堆叠在一起。通常我会遍历每个元素，遍历某个范围内的所有<label>值，制作<thead>等等但我已被指示使用某种模板插件/系统。

是否有人强烈建议模板化流程的位置：

HTML - ＆gt; JS操作 - ＆gt; HTML表格

这是一个模糊的＆amp;我需要制作表格的HTML的简化示例。

<div id="test3">
    <h1>Top Level</h1>
    <div class="fn_Name" fieldtype="hidden">
        <div class="errorDiv"></div>
    </div>
    <div class="fieldHolder fn_Protocol_Name" fieldtype="text">
        <div class="label">Protocol Name*</div>
        <div class="field">Value One</div>
        <div class="errorDiv"></div>
    </div>
    <div class="fieldHolder fn_Protocol_Description" fieldtype="text">
        <div class="label">Protocol Description*</div>
        <div class="field">Value Two</div>
        <div class="errorDiv"></div>
    </div>
    <div class="fieldHolder fn_Measurement_Labels" fieldtype="text">
        <div class="label">Measurement Labels*</div>
        <div class="field">Value Three</div>
    </div>
    <div class="fn_Red_Components" fieldtype="heading">
        <h2>Red Components</h2>
        <div class="errorDiv"></div>
    </div>
    <div class="fieldHolder fn_Red_Component_Fields fieldSetHolder" fieldtype="fieldSet">
        <div class="label">Red Component Fields</div>
        <div class="field">
            <div class="fieldHolder fs_Red_Component_Fields">
                <div class="field">
                    <div class="fieldHolder">
                        <div class="field fieldSetField">
                            <div class="fn_Red_Component" fieldtype="heading">
                                <h2>Red Component</h2>
                                <div class="errorDiv"></div>
                            </div>
                            <div class="fieldHolder fn_Red_Component_Name" fieldtype="text">
                                <div class="label">Red Component Name*</div>
                                <div class="field">
                                    <div class="fieldValue">
                                        Red Component Value
                                    </div>
                                </div>
                                <div class="errorDiv"></div>
                            </div>
                            <div class="fieldHolder fn_Red_Component_Role" fieldtype="select">
                                <div class="label">Red Component Role*</div>
                                <div class="field">
                                    <div class="fieldValue">
                                        A red component role val
                                    </div>
                                </div>
                                <div class="errorDiv"></div>
                            </div>
                            <div class="fieldHolder fn_Owner_Birth_Name" fieldtype="text">
                                <div class="label">Owner Birth Name</div>
                                <div class="field">
                                    <div class="fieldValue">
                                        Tommy
                                    </div>
                                </div>
                                <div class="errorDiv"></div>
                            </div>
                            <div class="fieldHolder fn_Red_Component_Type_Fields fieldSetHolder" fieldtype="fieldSet">
                                <div class="label">Red Component Type Fields</div>
                                <div class="field">
                                    <div class="fieldHolder fs_Red_Component_Type_Fields">
                                        <div class="field">
                                            <div class="fieldHolder">
                                                <div class="field fieldSetField">
                                                    <div class="fn_Component_Type" fieldtype="heading">
                                                        <h2>Component Type</h2>
                                                    </div>
                                                    <div class="fieldHolder fn_Red_Component_Type" fieldtype="select">
                                                        <div class="label">Red Component Type</div>
                                                        <div class="field">
                                                            <div class="fieldValue">
                                                                Some Value
                                                            </div>
                                                        </div>
                                                        <div class="errorDiv"></div>
                                                    </div>
                                                    <div class="fieldHolder fn_Red_Dog_Name" fieldtype="select" style="">
                                                        <div class="label">Red Dog Name*</div>
                                                        <div class="field">
                                                            <div class="fieldValue">

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="fieldHolder fs_Red_Component_Type_Fields">
                                        <div class="field">
                                            <div class="fieldHolder">
                                                <div class="field fieldSetField">
                                                    <div class="fn_Component_Type" fieldtype="heading">
                                                        <h2>Component Type</h2>
                                                    </div>
                                                    <div class="fieldHolder fn_Red_Component_Type" fieldtype="select">
                                                        <div class="label">Component</div>
                                                        <div class="field">
                                                            <div class="fieldValue">
                                                                Some Value
                                                            </div>
                                                        </div>
                                                        <div class="errorDiv"></div>
                                                    </div>
                                                    <div class="fieldHolder fn_Some_Name" fieldtype="select" style="">
                                                        <div class="label">Red Dog Name*</div>
                                                        <div class="field">
                                                            <div class="fieldValue">

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> </div>