JavaScriptを使用してテーブルにデータを動的に取り込みます。

Question

JavaScriptでテーブルデータを動的に取り込もうとしています。私はそれを取り込むことに成功したが、スタイリングといくつかの問題があり、ここで私がこれまでに達成したものです：

function populateOverallOverview(result){ 
    var tableData = new Array(); 
    var table = document.getElementById("firstTabOverall"); 

    for(var i = 0; i < result.length; i++){ 
     tableData[i] = new Array('Category: ' + result[i].category + '\n Best selling month: ' + result[i].topMonthStr + '\n Amount: ' + result[i].topAmount.toFixed(2)); 
    } 

    for(var i = 0; i < tableData.length; i++){ 
     var newRow = table.insertRow(table.length); 
     for(var j = 0; j < tableData[i].length; j++){ 
      var cell = newRow.insertCell(j); 

      cell.innerHTML = tableData[i][j]; 
     } 
    } 
} 

私のHTMLコード：

そして、私のコードは、上記目的を達成するために：

各行のためである私は何を達成したい

<div class="col-md-6"> 
    <table id="firstTabOverall" class="table table-striped" style="font-size:13px"> 
    </table> 
</div> 

、カテゴリ、ベストセラーの月と金額の3種類のサブ行があるでしょう。私は '\ n'を使って次の行に分割しようとしていますが、動作しません。

また、このケースではカテゴリ、ベストセラー月、金額を太字で表記する方法はありますか？

Answer 1

データの不必要な移行があります。 resultsから一時配列に、一時配列からテーブルへ...なぜ結果を直接テーブルに入れないのですか？もちろん、もちろん\nは動作しません。改行は、HTMLでは何も意味しません。各セルを個別に追加する必要があります。

以下は、多くのストレート楽しみにしています - とArray#forEach()方法があまりにも、別々のループカウンタの必要性をあなたにのRID：

function populateOverallOverview(result){ 
    var table = document.getElementById("firstTabOverall"); 

    // helper function   
    function addCell(tr, text) { 
     var td = tr.insertCell(); 
     td.textContent = text; 
     return td; 
    } 

    // insert data 
    result.forEach(function (item) { 
     var row = table.insertRow(); 
     addCell(row, 'Category: ' + item.category); 
     addCell(row, 'Best selling month: ' + item.topMonthStr); 
     addCell(row, 'Amount: ' + item.topAmount.toFixed(2)); 
    }); 
} 

代わりの値の前にカテゴリ名を繰り返し、それらをヘッダー行に書き込んでください。それはテーブルがとにかく動作するはずなのですよね？

ので、多分これは良いです：

function populateOverallOverview(result){ 
    var table = document.getElementById("firstTabOverall"); 

    // helper function   
    function addCell(tr, text) { 
     var td = tr.insertCell(); 
     td.textContent = text; 
     return td; 
    } 

    // create header 
    var thead = table.createTHead(); 
    var headerRow = th.insertRow(); 
    addCell(headerRow, 'Category'); 
    addCell(headerRow, 'Best selling month'); 
    addCell(headerRow, 'Amount'); 

    // insert data 
    result.forEach(function (item) { 
     var row = table.insertRow(); 
     addCell(row, item.category); 
     addCell(row, item.topMonthStr); 
     addCell(row, item.topAmount.toFixed(2)); 
    }); 
} 

使用CSSあなたのテーブルとテーブルヘッダのスタイルを。ヘッダ行を静的なHTMLソースに書き込む方が簡単かもしれません。

---

あなたが積極太字インラインラベルを追加する必要がある場合、あなたは<b>要素を取得するには、これらのdocument.createElement("b")を使用することができ、テーブルセルのこのような場合には、その.textContent、その後はそれぞれのコンテナの.appendChild()を使用して設定します。

同じようにプレーンテキストを追加できます。代わりにdocument.createTextNode('...your text...')を使用して追加してください。