在javascript中为动态表添加表头 | 在javascript中为动态表添加表头

本文介绍了在javascript中为动态表添加表头的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试用 javascript 创建一个表并在其上放置一个标题.我试图合并这个 SO question 的答案，但也许我没有'不要把它放在正确的地方.表格的主体完美运行，但标题作为一堆文本附加到顶部，而不是格式良好的标题.代码如下:

I'm trying to create a table in javascript and put a header on it. I tried to incorporate the answer from this SO question but perhaps I didn't include it in the right place. The body of the table works perfectly, but the header appends as a bunch of text to the top instead of a nicely formatted header. Here is the code:

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 标记，例如或 ，它们也会作为纯文本返回.我怎样才能让它们被读取为 HTML.我也有一个 CSS 页面，但没有重置或任何(故意)影响粗体或表格的使用.这是我的结果

It prints the rows and the columns correctly, but instead of interpreting the <tr><th> as HTML tags it just prints them out as text. I've also noticed that if the table text contains any HTML tags, like <strong> or <b>, they are returned as plain text as well. How can I make them be read as HTML. I have a CSS page as well but there's no reset or anything (intentionally) affecting the use of bold or tables. Here's my result

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

推荐答案

Solution1您附加 tbody 行的方式，您也可以插入标题.因此，您可以使用如下所示的内容，而不是 tbl.append(header) 并定义标题字符串:

Solution1The way you are appending tbody rows, you can insert the heading as well. So instead of tbl.append(header) and defining the header string, you can use something like below:

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 属性，如下所示.

Solution2As a quick solution you can use innerHTML property, as shown below.

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中为动态表添加表头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！