JavaScriptを生成したテーブルにヘッダーを挿入するにはどうすればよいですか？

Question

私はjavascriptでjsonデータを受け取って、それをhtmlテーブルに変換します。

スクリプトは動作していますが、テーブルにヘッダーを挿入するにはどうすればよいですか？ヘッダを追加し、既存のコードに

<script> 
     $(document).ready(function(){ 
      $('#id_adv').DataTable(); 
      $('#id_adv').on('click','.btn',function(){ 
       var currow = $(this).closest('tr'); 
       var result = currow.find('td:eq(1)').text(); 

       $.get('{% url "prop_table" %}', {var1:result}, function (data_prop) { 
        var data = data_prop['data_prop']  
        var data_json = JSON.parse(data); 
        var html = ""; 
        for (var i = 0; i < data_json.length; i++) { 
         html += "<tr><td>" + data_json[i].fields.var1 + "</td><td>" + data_json[i].fields.var2 + "</td><tr>"; 
         } 
        $('#id_prop').html(html);      
       }) 
       document.getElementById('total').innerHTML = result;      
      }); 
     }); 
    </script> 

Answer 1

若干の変更：ここで

はコードです。これは、あなたのテーブルにヘッダを追加する必要があります

<script> 
     .... 
        var html = ""; 
        html += "<tr><th>Header 1</th><th>Header 2</th><tr>"; 
        for (var i = 0; i < data_json.length; i++) { 
         html += "<tr><td>" + data_json[i].fields.var1 + "</td><td>" + data_json[i].fields.var2 + "</td><tr>"; 
         } 
        $('#id_prop').html(html);      
     .... 
</script> 

（私はevalのの使用状況を切り出し、ちょうどHTMLのテーブルヘッダを作成するために、関連部分において守ってきました）。 そして私はあなたの質問のコメントに同意し、組み込みのJSON解析を使用します。 evalは悪用しようとしています。

Answer 2

テーブルを作成した後でヘッダーを追加できると思います。 createTHead（）メソッドは空の要素を作成し、それをテーブルに追加します。私は：

<script> 
    function createHeader() { 
     var table = document.getElementById("myTable"); 
     var header = table.createTHead(); 
     var row = header.insertRow(0); 
     var cell = row.insertCell(0); 
     cell.innerHTML = "<b>This is a table header</b>"; 
    } 
</script>