JavaScriptの動的表の表のヘッダーを追加する

JavaScriptを使用して表を作成し、ヘッダーを挿入しようとしています。私はこのSO questionから答えを組み込もうとしましたが、おそらく私は正しい場所にそれを含めなかったでしょう。表の本体は完全に機能しますが、ヘッダーはきれいに整形されたヘッダーの代わりに一番上のテキストに追加されます。ここでは、コードは次のとおりです。JavaScriptの動的表の表のヘッダーを追加する

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

それは正しく、行と列を出力しますが、代わりにHTMLタグとして<tr><th>を解釈することは、単なるテキストとしてそれらを出力します。また、テーブルテキストに<strong>や<b>などのHTMLタグが含まれている場合は、プレーンテキストとしても返されることに気付きました。どうすればそれらをHTMLとして読むことができますか？私はCSSページも持っていますが、リセットや何も（意図的に）太字や表の使用には影響しません。ここに私の結果はあなたがTBODY行を追加する方法は

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

出典

2017-10-07 jss367

ソリューション1 だ、あなたにも見出しを挿入することができます。ので、代わりに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()

出典

2017-10-07 12:55:55

第2の解決策は、私のために完璧に動作しますが、最初のものは、最初の列上の第2の列と何も上国のヘッダを出力します。 – jss367

@ jss367入力いただきありがとうございます、私はこれを編集しました。今、両方とも動いています –

JavaScriptの動的表の表のヘッダーを追加する

答えて

関連する問題