Question

我试图在javascript中创建一个表并在其上放置一个标题。我试图将SO question的答案纳入其中，但也许我没有把它包括在正确的地方。表的主体完美地工作，但是标题作为一堆文本附加到顶部而不是格式良好的标题。这是代码：

function generate_table() {
    // get the reference for the body
    var body = document.getElementsByTagName("body")[0];

    // creates a <table> element and a <tbody> element
    var tbl = document.createElement("table");
    //var header = document.createElement("header");
    var header = '<tr><th>Country</th><th>City</th></tr>';

    //var header = "<th>Header</th>";
    var tblBody = document.createElement("tbody");


    // creating all cells
    for (var i = 0; i < results.weak_sent.length; i++) {
        // creates a table row
        var row = document.createElement("tr");

        for (var j = 0; j < 2; j++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            if (j == 0) {
                var cellText = document.createTextNode(results.weak_sent_num[i]);
            } else {
                var cellText = document.createTextNode(results.weak_sent[i]);
            }


            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }
    tbl.append(header)
    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);



    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
}

它正确打印行和列，但不是将<tr><th>解释为HTML标记，而是将它们作为文本打印出来。我还注意到，如果表格文本包含任何HTML标记，例如<strong>或<b>，它们也会以纯文本形式返回。如何将它们作为HTML读取。我也有一个CSS页面，但没有重置或任何（故意）影响粗体或表格的使用。这是我的结果

<tr><th>Country</th><th>City</th></tr>
1   Row 1 text
2   Row <b>2</b> text

Answer 1

<强>解决方法1 您添加tbody行的方式也可以插入标题。因此，不是tbl.append(header)而是定义标题字符串，您可以使用以下内容：

results = {
  weak_sent: [
    "row 1 data",
    "row 2 data"
  ],
  weak_sent_num: [1,2]
}
function generate_table() {
    // get the reference for the body
    var body = document.getElementsByTagName("body")[0];

    // creates a <table> element and a <tbody> element
    var tbl = document.createElement("table");
    //var header = document.createElement("header");
    // var header = '<tr><th>Country</th><th>City</th></tr>';
    var header=  document.createElement('thead')
    var headingRow = document.createElement('tr')

    var headingCell1 = document.createElement('td')
    var headingText1 = document.createTextNode('country')
    headingCell1.appendChild(headingText1)
    headingRow.appendChild(headingCell1)
    
    var headingCell2 = document.createElement('td')
    var headingText2 = document.createTextNode('City')
    headingCell2.appendChild(headingText2)
    headingRow.appendChild(headingCell2)

    header.appendChild(headingRow)
    tbl.appendChild(header)
    //var header = "<th>Header</th>";
    var tblBody = document.createElement("tbody");


    // creating all cells
    for (var i = 0; i < results.weak_sent.length; i++) {
        // creates a table row
        var row = document.createElement("tr");

        for (var j = 0; j < 2; j++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            if (j == 0) {
                var cellText = document.createTextNode(results.weak_sent_num[i]);
            } else {
                var cellText = document.createTextNode(results.weak_sent[i]);
            }


            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }
    // This is for the quick solution
    // tbl.innerHTML = header

    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);



    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
}

generate_table()

<强>溶液2 作为一种快速解决方案，您可以使用innerHTML属性，如下所示。

results = {
  weak_sent: [
    "row 1 data",
    "row 2 data"
  ],
  weak_sent_num: [1,2]
}
function generate_table() {
    // get the reference for the body
    var body = document.getElementsByTagName("body")[0];

    // creates a <table> element and a <tbody> element
    var tbl = document.createElement("table");
    //var header = document.createElement("header");
    var header = '<tr><th>Country</th><th>City</th></tr>';

    //var header = "<th>Header</th>";
    var tblBody = document.createElement("tbody");


    // creating all cells
    for (var i = 0; i < results.weak_sent.length; i++) {
        // creates a table row
        var row = document.createElement("tr");

        for (var j = 0; j < 2; j++) {
            // Create a <td> element and a text node, make the text
            // node the contents of the <td>, and put the <td> at
            // the end of the table row
            var cell = document.createElement("td");
            if (j == 0) {
                var cellText = document.createTextNode(results.weak_sent_num[i]);
            } else {
                var cellText = document.createTextNode(results.weak_sent[i]);
            }


            cell.appendChild(cellText);
            row.appendChild(cell);
        }

        // add the row to the end of the table body
        tblBody.appendChild(row);
    }
    // This is for the quick solution
    tbl.innerHTML = header
    // put the <tbody> in the <table>
    tbl.appendChild(tblBody);



    // appends <table> into <body>
    body.appendChild(tbl);
    // sets the border attribute of tbl to 2;
    tbl.setAttribute("border", "2");
}

generate_table()

在javascript中为动态表添加表头

1 个答案: