Question

我想知道如何做到以下几点的最好方法：

我使用 | 作为数据之间的分隔符，通过ajax返回我的数据库数据。

success: function (data, responseText, textStatus) {
    var dataBack = data.split("|");

    $('#name').html(dataBack[0]);
    $('#company').html(dataBack[1]);
    $('#address').html(dataBack[2]);
    $('#phone').html(dataBack[3]);
    $('#email').html(dataBack[4]);
    $('#city').html(dataBack[5]);
    $('#state').html(dataBack[6]);
    $('#zip').html(dataBack[7]);
    $('#accNum').html(dataBack[8]);

    howManyCases = dataBack[9];
    var htmlCode = '';
    var caseStats = '';
    var myDate = new Date(dataBack[10]);                
    var month = new Array();

    month[0]="01";month[1]="02";month[2]="03";month[3]="04";month[4]="05";month[5]="06";
    month[6]="07";month[7]="08";month[8]="09";month[9]="10";month[10]="11";month[11]="12";

    var theFinalDate = myDate.getFullYear() + '-' + month[myDate.getMonth()] + '-' + myDate.getDate();

    if (dataBack[14] == 0) {
        caseStats = 'PENDING';
    } else {
        caseStats = 'ACCEPTED';
    }

    htmlCode = '<td width="124" style="padding-top: 8px; padding-left: 10px;" id="caseDate">' + theFinalDate + '</td>' + 
                '<td width="160" style="padding-top: 8px;" id="caseNum">' + dataBack[11] + '</td>' + 
                '<td width="172" style="padding-top: 8px;" id="caseLab">' + dataBack[12] + '</td>' + 
                '<td width="87" style="padding-top: 8px; color: #d8a401;" id="caseStatus">' + caseStats + '</td>' + 
                '<td width="59" style="padding-top: 8px;" id="caseQue">' + dataBack[13] + '</td>';

    $('#cases').html(htmlCode);

dataBack [9] 存储返回的记录数（0-4）“限制5”

dataBack [10] - [14] 是填充每个表格行所需的数据。

同样，如果返回 1条记录，则该数字会继续 dataBack [15] - [19] 等等。

那么在某种类型的循环中最好这样做呢？

Answer 1

以下是一些可能性的示例，它使用循环来使代码更具可重用性，当然，您需要将这些想法塑造成您真正想要的东西，因为我无法从您的示例中完全猜出，因为您似乎在混合显示的数据。

<强> CSS

.caseDate {
    width: 124px;
    padding-top: 8px;
    padding-left: 10px;
}
.caseNum {
    width: 160px;
    padding-top: 8px;
}
.caseLab {
    width: 172px;
    padding-top: 8px;
}
.caseStatus {
    width: 87px;
    padding-top: 8px;
    color: #d8a401;
}
.caseQue {
    width: 59px;
    padding-top: 8px;
}

<强>的JavaScript

var howManyCases,
    table = document.createElement("table"),
    tbody = document.createElement("tbody"),
    data = "John Smith|Some Company|The Street|000 - 000 000|john@some.company|Lost|Sunny|123-456|0123456789|3|" + Date.now() + "|1001010010|LAB1234|Que1234|0|John Smith|Some Company|The Street|000 - 000 000|john@some.company|Lost|Sunny|123-456|0123456789|3|" + Date.now() + "|1001010010|LAB1234|Que1234|0|John Smith|Some Company|The Street|000 - 000 000|john@some.company|Lost|Sunny|123-456|0123456789|3|" + Date.now() + "|1001010010|LAB1234|Que1234|0|John Smith|Some Company|The Street|000 - 000 000|john@some.company|Lost|Sunny|123-456|0123456789|3|" + Date.now() + "|1001010010|LAB1234|Que1234|0|John Smith|Some Company|The Street|000 - 000 000|john@some.company|Lost|Sunny|123-456|0123456789|3|" + Date.now() + "|1001010010|LAB1234|Que1234|0|John Smith|Some Company|The Street|000 - 000 000|john@some.company|Lost|Sunny|123-456|0123456789|3|" + Date.now() + "|1001010010|LAB1234|Que1234|0",
    month = [],
    i;

for (i = 1; i < 13; i += 1) {
    if (i < 10) {
        month.push("0" + i);
    } else {
        month.push(i.toString());
    }
}

tbody.id = "cases";
table.appendChild(tbody);
document.body.appendChild(table);

function success(data) {
    var dataBack = data.split("|"),
        length = dataBack.length,
        fields = ['name', 'company', 'address', 'phone', 'email', 'city', 'state', 'zip', 'accNum'],
        caseStats = '',
        classes,
        myDate,
        theFinalDate,
        i,
        tr,
        tempTd,
        records = [];

    for (i = 0; i < length; i += 15) {
        records.push(dataBack.slice(0, 15));
    }

    records.forEach(function (record, recordNum) {
        fields.forEach(function (field, index) {
            var newDiv = document.createElement("div");

            newDiv.id = field + recordNum;
            newDiv.textContent = record[index];
            document.body.appendChild(newDiv);
        });

        howManyCases = parseInt(record[9], 10);
        myDate = new Date(parseInt(record[10], 10));
        theFinalDate = myDate.getFullYear() + '-' + month[myDate.getMonth()] + '-' + myDate.getDate();

        if (parseInt(record[14], 10) === 0) {
            caseStats = 'PENDING';
        } else {
            caseStats = 'ACCEPTED';
        }

        classes = {
            "caseDate": theFinalDate,
            "caseNum": record[11],
            "caseLab": record[12],
            "caseStatus": caseStats,
            "caseQue": record[13]
        };

        tr = document.createElement("tr");
        Object.keys(classes).forEach(function (className) {
            tempTd = document.createElement("td");
            tempTd.className = className;
            tempTd.textContent = classes[className];
            tr.appendChild(tempTd);
        });

        tbody.appendChild(tr);
    });
}

success(data);

在jsfiddle

上

JS与db数据分开

1 个答案: