如何将标头添加到JSON输出表中？

Question

我正在尝试向此JSON输出表添加标头，但我不知道如何执行此操作。 这段代码为我提供了一个表格，该表格中填充了从数据库返回的数据，并将其置于由<td><tr>标记构成的表格格式中。 问题是我需要一个表头，而且我不知道该如何编码该零件。 有任何想法吗？

function renderSearchResults( results, domNode ) {
    var i;
    var out = "<table>";

    if (results.length === 0) {
        domNode.innerHTML = 'No results matching your search.';
        return;
    }
    // loop to print the JSON in a table format
    results.forEach(function (result) {
        console.info(result);
        out += "<tr><td>" +
        result.ContractId +
        "</td><td>" +
        result.ContractTitle +
        "</td><td>" +
        result.Terminal +
        "</td><td>" +
        result.Cabinet +
        "</td><td>" +
        result.Section +
        "</td><td>" +
        result.Folder +
        "</td><td>" +
        result.Sheet +
        "</td><td>" +
        result.Consult +
        "</td><td>" +
        result.Location +
        "</td><td>" +
        result.Active +
        "</td><td>" +
        result.Theme +
        "</td><td>" +
        result.Construction +
        "</td><td>" +
        result.Subtheme +
        "</td><td>" +
        result.AsBuilt +
        "</td><td>" +
        result.Year +
        "</td><td>" +
        "<a href= " + result.Path + " target=_blank>" + "Binder" + "</a>"
    } );

    out += "</table>";
    domNode.innerHTML = out;
}

Answer 1

在最初声明out ，可以放入<th>或tableheader标记，即：

    function renderSearchResults( results, domNode ) {
       var i;
       var out = "<table><th>ContractId</th><th>ContractTitle</th><th>Terminal</th><th>Cabinet </th><th>Section </th><th>Folder </th><th>Sheet </th><th>Consult </th><th>Location </th><th>Active </th><th>Theme </th><th>Construction </th><th>Subtheme </th><th>AsBuilt </th><th>Year </th>";

       if (results.length === 0) {
          domNode.innerHTML = 'No results matching your search.';
          return;
       }

       results.forEach(function (result) {
        console.info(result);
        out += "<tr><td>" +
        (result.ContractId !== null ? result.ContractId : 'Not Applicable') +
        "</td><td>" +
        (result.ContractTitle !== null ? result.ContractTitle : 'Not Applicable') +
        "</td><td>" +
        (result.Terminal !== null ? result.Terminal : 'Not Applicable') +
        "</td><td>" +
        (result.Cabinet !== null ? result.Cabinet : 'Not Applicable') +
        "</td><td>" +
        (result.Section !== null ? result.Section : 'Not Applicable') +
        "</td><td>" +
        (result.Folder !== null ? result.Folder : 'Not Applicable') +
        "</td><td>" +
        (result.Sheet !== null ? result.Sheet : 'Not Applicable') +
        "</td><td>" +
        (result.Consult !== null ? result.Consult : 'Not Applicable') +
        "</td><td>" +
        (result.Location !== null ? result.Location : 'Not Applicable') +
        "</td><td>" +
        (result.Active !== null ? result.Active : 'Not Applicable') +
        "</td><td>" +
        (result.Theme !== null ? result.Theme : 'Not Applicable') +
        "</td><td>" +
        (result.Construction !== null ? result.Construction : 'Not Applicable') +
        "</td><td>" +
        (result.Subtheme !== null ? result.Subtheme : 'Not Applicable') +
        "</td><td>" +
        (result.AsBuilt !== null ? result.AsBuilt: 'Not Applicable') +
        "</td><td>" +
        (result.Year !== null ? result.Year : 'Not Applicable')+
        "</td><td>" +
        "<a href= " + result.Path + " target=_blank>" + "Binder" + "</a>"
    } );

        out += "</table>";
        console.log(out);
       domNode.innerHTML = out;
   }

Answer 2

表头有一个不同的标记。

<tr>用于标题的<th>行，数据用于<td> 。

您可以在此处查看更多信息。

您可以在检查结果后添加标题：

if (results.length === 0) {
        domNode.innerHTML = 'No results matching your search.';
        return;
} else {
   out += "<tr><th>Header</th></tr>"
}