Javascript Jquery嵌套表创建方法

我已经编写了下面的代码，它根据json响应在另一个表中创建一个表

主表代码

var user=''；
$.each（html.ListOfReportModelData，function（key，val）{
用户+=''；
用户+=''；
用户+=''；
如果（标志==“假”）{
用户+=''；
用户+=''；
用户+=‘PR编号’；
用户+=''；
用户+=''；
用户+='创建日期'；
用户+=''；
用户+=''；
用户+='站点名称'；
用户+=''；
用户+=''；
用户+=‘订单ID’；
用户+=''；
用户+=''；
用户+='文件名'；
用户+=''；
用户+=''；
}
var计数=0；
$.each（val.Orders，函数（键，子项）{
//调试器；
用户+=''；
如果（计数=0）{
用户+=''；
计数=1；
}
用户+=''；
user+=val.createdDataText；
用户+=''；
用户+=''；
user+=val.SiteName；
用户+=''；
用户+=''；
user+=child.OrderId；
用户+=''；
用户+=''；
if（child.ShowLink）{
用户+=''；
}
用户+=''；
用户+=''；
});
用户+=''；
用户+=''；
用户+=''；
用户+=''；
用户+=''；
用户+=''；
用户+=''；
flag=“true”；
});
用户+=''；

子表创建

$.getJSON（“/Home/FinancialInformation”），数据，函数（html）{
totalRecords=html.FinanceData.length；
如果（totalRecords==0）{
$（'#'+Req_Number+''）.empty（）；
警报（“没有可用的财务数据！！！”）；
}
否则{
var-Fin=''；
Fin+=''；
Fin+=‘批准类型’；
Fin+=‘需要批准’；
Fin+=‘批准人’；
Fin+='经521'批准'；
Fin+=‘批准日期’；
Fin+=''；
$.each（html.FinanceData，函数（key，val）{
Fin+=''；
Fin+=''+val.Approval_Type+''；
Fin+=''+val.需要批准+''；
Fin+=''+val.由+''批准；
Fin+=''+价值由_521+''批准；
Fin+=''+val.批准日期+''；
Fin+=''；
});
Fin+=''；
$（'#'+Req_Number+''）.empty（）
$（“#”+请求号+”）。追加（Fin）；
}
});

---

我可以看到我的表被正确创建，但我看到在创建这些代码时有很多麻烦的活动。有没有更好的方法来实现同样的事情？主要是使用一些插件。

其他人怎么说你应该使用一个模板引擎，比如：handlebarsJS、mustacheJS、下划线JS或者类似reactJS的东西

或者，如果您想将其与jQuery一起保存，您可以将代码结构如下：

• 您可以使用jQuery语法创建每个元素，而不是像那样直接注入html
• 您可以使用函数拆分逻辑
• 您只能使用CSS类（无样式）并将其与jQuery一起添加

下面是一个例子：

var getParentTable = function() {
    // add style to CLASS in CSS
    return $('<table></table>').addClass('parentTableClass');
};

var getInternalTable = function() {
    return $('<table></table>')
        .addClass('childTableClass')
        .attr('id', 'internalTable');
};

var getRow = function(classValue) {
    return $('<tr></tr>').addClass(classValue);
};

var getCol = function(textValue, classValue) {
    return $('<td></td>')
                .addClass(classValue)
                .text(textValue);
};

var parentTable = getParentTable();
parentTable.append(internalTable);

 $.each(html.ListOfReportModelData, function (key, val) {
    var internalTable = getInternalTable();
    var simpleRow = getRow();
    var simpleCol = getCol();
    var row1 = getRow('GreenColor');
    var row3 = getRow('PinkColor');

    row1
        .append(getCol('PR Number', 'td1 accord'))
        .append(getCol('Created On', 'td2 accord'))
        .append(getCol('Site Name', 'td3 accord'))
        .append(getCol('Order ID', 'td4 accord'))
        .append(getCol('File Name', 'td5 accord'));

    internalTable.append(row1);

    $.each(val.Orders, function (key, child) {  
        var row2 = getRow('PinkColor');
            .append(getCol(val.Req_Number, 'td1 accord'))
            .append(getCol(val.CreatedDateText, 'td2 accord'))
            .append(getCol(val.SiteName, 'td3 accord'))
            .append(getCol(child.OrderId, 'td4 accord'))
            .append(getCol(child.ShowLink, 'td5 accord'));

        internalTable.append(row2);
     });

    internalTable.append(row3);

    simpleCol.append(internalTable);
    simpleRow.append(simpleCol);

    parentTable.append(simpleRow);
 });

var getParentTable=function（）{
//在CSS中将样式添加到类中
返回$（''）.addClass（'parentTableClass'）；
};
var getInternalTable=函数（）{
返回$（''）
.addClass（'childTableClass'）
.attr（'id'，'internalTable'）；
};
var getRow=函数（classValue）{
返回$（''）.addClass（classValue）；
};
var getCol=函数（textValue、classValue）{
返回$（''）
.addClass（类值）
.text（textValue）；
};
var parentTable=getParentTable（）；
parentTable.append（internalTable）；
$.each（html.ListOfReportModelData，function（key，val）{
var internalTable=getInternalTable（）；
var simpleRow=getRow（）；
var simpleCol=getCol（）；
var row1=getRow（'GreenColor'）；
var row3=getRow（'PinkColor'）；
第1行
.append（getCol（'PR Number'，'td1 accord'））
.append（getCol（'Created On'，'td2 accord'））
.append（getCol（'Site Name'，'td3 accord'））
.append（getCol（'Order ID'，'td4 accord'））
.append（getCol（'File Name'，'td5 accord'）；
internalTable.append（第1行）；
$.each（val.Orders，函数（键，子项）{
var row2=getRow（'PinkColor'）；
.append（getCol（val.Req_编号'td1 accord'））
.append（getCol（val.CreatedDateText，'td2 accord'））
.append（getCol（val.SiteName，'td3 accord'））
.append（getCol（child.OrderId，'td4 accord'））
.append（getCol（child.ShowLink，'td5 accord'）；
internalTable.append（第2行）；
});
internalTable.append（第3行）；
simpleCol.append（internalTable）；
simpleRow.append（simpleCol）；
parentTable.append（simpleRow）；
});

其他人怎么说你应该使用一个模板引擎，比如：handlebarsJS、mustacheJS、下划线JS或者类似reactJS的东西

或者如果您想用jQuery保存它

 $.getJSON("/Home/FinancialInformation", data, function (html) {

            totalRecords = html.FinanceData.length;
            if (totalRecords == 0) {
                $('#' + Req_Number + '').empty();
                alert('No Finance Data Available!!!!!');
            }
            else {
                var Fin = '<table id=' + Req_Number + ' width="100%"  border="0" cellpadding="2px" cellspacing="2px" >';
                Fin += '<tr class="GreenColor">';
                Fin += '<td class="accord" style="width: 45%">Approval Type</td>';
                Fin += '<td class="accord" style="width: 10%">Approval Required</td>';
                Fin += '<td class="accord" style="width: 15%">Approved By</td>';
                Fin += '<td class="accord" style="width: 10%">Approved By 521</td>';
                Fin += '<td class="accord" style="width: 20%">Approved Date</td>';
                Fin += '</tr>';
                $.each(html.FinanceData, function (key, val) {

                    Fin += '<tr class="PinkColor">';
                    Fin += '<td style="width: 45%">' + val.Approval_Type + '</td>';
                    Fin += '<td style="width: 10%">' + val.Approval_Required + '</td>';
                    Fin += '<td style="width: 15%">' + val.Approved_By + '</td>';
                    Fin += '<td style="width: 10%">' + val.Approved_By_521 + '</td>';
                    Fin += '<td style="width: 20%">' + val.Approved_Date + '</td>';
                    Fin += '</tr>';
                });
                Fin += '</table>';
                $('#' + Req_Number + '').empty()
                $('#' + Req_Number + '').append(Fin);
            }
        });

var getParentTable = function() {
    // add style to CLASS in CSS
    return $('<table></table>').addClass('parentTableClass');
};

var getInternalTable = function() {
    return $('<table></table>')
        .addClass('childTableClass')
        .attr('id', 'internalTable');
};

var getRow = function(classValue) {
    return $('<tr></tr>').addClass(classValue);
};

var getCol = function(textValue, classValue) {
    return $('<td></td>')
                .addClass(classValue)
                .text(textValue);
};

var parentTable = getParentTable();
parentTable.append(internalTable);

 $.each(html.ListOfReportModelData, function (key, val) {
    var internalTable = getInternalTable();
    var simpleRow = getRow();
    var simpleCol = getCol();
    var row1 = getRow('GreenColor');
    var row3 = getRow('PinkColor');

    row1
        .append(getCol('PR Number', 'td1 accord'))
        .append(getCol('Created On', 'td2 accord'))
        .append(getCol('Site Name', 'td3 accord'))
        .append(getCol('Order ID', 'td4 accord'))
        .append(getCol('File Name', 'td5 accord'));

    internalTable.append(row1);

    $.each(val.Orders, function (key, child) {  
        var row2 = getRow('PinkColor');
            .append(getCol(val.Req_Number, 'td1 accord'))
            .append(getCol(val.CreatedDateText, 'td2 accord'))
            .append(getCol(val.SiteName, 'td3 accord'))
            .append(getCol(child.OrderId, 'td4 accord'))
            .append(getCol(child.ShowLink, 'td5 accord'));

        internalTable.append(row2);
     });

    internalTable.append(row3);

    simpleCol.append(internalTable);
    simpleRow.append(simpleCol);

    parentTable.append(simpleRow);
 });