Jquery嵌套表创建干净的方法

Question

我写了下面的代码，它在json response中的另一个表中创建了一个表。

主表代码

 var user = '<table width="98%" cellspacing="0" cellpadding="1" style="text-align: left; margin: 0 auto;';
                user += 'border-collapse: collapse;" >';

                $.each(html.ListOfReportModelData, function (key, val) {

                    user += '<tr>';
                    user += '<td>';
                    user += '<table width="100%" id="internalTable" border="0" cellspacing="2px" cellpadding="2px" >';
                    if (flag == "false") {
                        user += '<tr class="GreenColor">';
                        user += '<td  style="width: 15%" class="accord">';
                        user += 'PR Number';
                        user += '</td>';
                        user += '<td  style="width: 10%" class="accord">';
                        user += 'Created On';
                        user += '</td>';
                        user += '<td  style="width: 10%" class="accord">';
                        user += 'Site Name';
                        user += '</td>';
                        user += '<td style="width: 10%" class="accord">';
                        user += 'Order ID';
                        user += '</td>';
                        user += '<td style="width: 55%" class="accord">';
                        user += 'File Name';
                        user += '</td>';
                        user += '</tr>';
                    }
                    var count = 0;

                    $.each(val.Orders, function (key, child) {
                        //debugger;
                        user += '<tr class="PinkColor">';
                        if (count == 0) {
                            user += '<td valign="top" rowspan="' + val.Orders.length + '" style="width: 15%"><a href="javascript:GetFinanceData(' + "'" + val.SiteName + "','" + val.Req_Number + "'" + ');">';
                            user += val.Req_Number;
                            user += '</a></td>';
                            count = 1;
                        }
                        user += '<td valign="top" style="width: 10%">';
                        user += val.CreatedDateText;
                        user += '</td>';
                        user += '<td valign="top" style="width: 10%">';
                        user += val.SiteName;
                        user += '</td>';
                        user += '<td valign="top" style="width: 10%">';
                        user += child.OrderId;
                        user += '</td>';
                        user += '<td style="width: 55%;break-word: word-wrap;">';
                        if (child.ShowLink) {

                            user += '<a href="javascript:Export(' + "'" + child.ID + "','" + val.SiteName + "'" + ');">';
                        }

                        user += child.Attachments_FileName;
                        if (child.ShowLink) {
                            user += '</a>';
                        }
                        user += '</td>';
                        user += '</tr>';
                    });
                    user += '<tr class="PinkColor">';
                    user += '<td colspan="5"><div id="' + val.Req_Number + '" ></div>';
                    user += '</td>';
                    user += '</tr>';

                    user += '</table>';
                    user += '</td>';
                    user += '</tr>';

                    flag = "true";

                });
                user += '</table>';

子表创建

 $.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);
            }
        });

我可以看到我的表格正确创建但是我在创建这些代码时看到了很多繁琐的活动。是否有更好的方法来实现相同的东西？主要是使用一些插件。

Answer 1

其他人如何说你应该使用模板引擎，如：handlebarsJS，mustacheJS，underscoreJS或者像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);
 });