javascriptを使用してテーブルにサブヘッダを作成する

Question

javascriptのみを使用してサブヘッダ列を作成する方法を知りたいと思います。私のデータはサーバから来ているので、カラムとサブヘッダを作成したいだけです。

私は既に作成していますが、サブヘッダにはjavascriptのみを使用する（cssはそこにあります）が、htmlの助けを借りて取得することはできません。

誰か助けてもらえますか？ これは、テーブルのいくつかのデモです - あなたはデータのどの構造について詳しく説明することができ、ここでトップに私は3列

Answer 1

$(document).ready(function() { 
 
    $('#addSubHeader').click(function() { 
 
    var subHeader = "<tr><th>3</th><th>4</th>><th>5</th><th>6</th></tr>"; 
 
    $(subHeader).appendTo("thead"); 
 
    }); 
 
});

th { 
 
    text-align:center; 
 
} 
 

 
td { 
 
    width: 100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table"> 
 
<thead> 
 
    <tr> 
 
    <th colspan="2">1</th> 
 
    <th colspan="2">2</th> 
 
    </tr> 
 
</thead> 
 
<tbdody> 
 
    <tr> 
 
    <td>a</td> 
 
    <td>b</td> 
 
    <td>c</td> 
 
    <td>d</td> 
 
    </tr> 
 
    <tr> 
 
    <td>e</td> 
 
    <td>f</td> 
 
    <td>g</td> 
 
    <td>h</td> 
 
    </tr> 
 
</tbdody> 
 
</table> 
 
<button id="addSubHeader"> 
 
add a subheader</button> 
 
</button>