Jquery嵌套表创建干净的方法

Jquery nested table creation clean approach

本文关键字：方法 创建 嵌套 Jquery      更新时间：2023-09-26

我写了下面的代码，从json响应中创建另一个表内的表。

主表代码

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

我可以看到我的表创建正确，但我看到很多繁琐的活动在创建这些代码。是否有更好的方法来达到同样的目的?主要使用一些插件

别人怎么说你应该使用模板引擎:handlebarsJS, mustacheJS, underscoreJS或者像reactJS这样的东西

或者如果你想用jQuery，你可以这样构建你的代码:

  • 不像那样直接注入html，你可以使用jQuery语法来创建每个元素
    • 可以拆分逻辑和函数
  • 你可以只使用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);
 });
相关文章：