Java Scriptでhtmlの表にセルを追加する時、結合したセルを追加したい

Java Scriptでhtmlの表のセルを追加する時、結合したセルを追加したいです。
実際に作成しているコードの一部とやりたい事のイメージを画像でまとめました。

色々調べたのですがやり方が分かりません。
よろしくお願いします。

html
1<html>
2<body>
3  <input type="button" onClick="table('AddRow')" value="行＋">
4  <input type="button" onClick="table('AddCol')" value="列＋">
5
6  <table id="tbl">
7    <tr><td>00</td><td colspan="2">01</td></tr>
8    <tr><td>10</td><td>11</td><td>12</td></tr>
9  </table>
10
11    <script>
12    function table(i){
13      switch (i) {
14        case 'AddRow': // 行を追加
15            var newRow  = tbl.insertRow();
16            var newCell = newRow.insertCell();
17            newCell.innerHTML = '先頭行';
18
19            for (var i = 1; i <= (tbl.rows[1].cells.length-1)/2; i++) {
20              var newCell = newRow.insertCell();
21              newCell.innerHTML = '--';
22              var newCell = newRow.insertCell();
23              newCell.innerHTML = '--';
24            }
25            break;
26
27        case 'AddCol': // 列を追加
28            var newCell = tbl.rows[0].insertCell(); // 1列 追加
29            newCell.innerHTML = '先頭列';
30            var newCell = tbl.rows[0].insertCell();
31
32            for (var i = 1; i < tbl.rows.length; i++) {
33              var newCell = tbl.rows[i].insertCell();
34              newCell.innerHTML = '--';
35              var newCell = tbl.rows[i].insertCell();
36              newCell.innerHTML =  '--';
37            }
38            break;
39        }
40    }
41    </script>
42
43    <style type="text/css">
44  th,td {
45    border-collapse: collapse;
46    border: solid 0.5px; // 枠線指定
47    border-color: #000;
48    padding: 5px 10px;
49    table-layout: fixed;
50    text-align: center;
51  }
52</style>
53  </body>
54  </html>
55

このプログラムを実行してボタンを押すと↓のようになる

やりたい事は先頭列を２つで１つにすること

イメージは↓こんな感じ

行動規範の内容に同意します

回答1件

ベストアンサー

こうでは？

js
1var newCell = tbl.rows[0].insertCell(); // 1列 追加
2newCell.innerHTML = '先頭列';
3//newCell.colspan = 2; // 2019.01.29 指摘により修正
4newCell.colSpan = 2;
5//var newCell = tbl.rows[0].insertCell();