javascriptのテーブル作成時、rowspanを変数にするとテーブルが崩れてしまう。

Question

現在、美容室の予約状況を確認できるシステムを作成しています。そこで、テーブルを表示させて見やすくしようと考えました。施術メニューによって時間が異なるため、時間感覚はそのままでメニューに合わせて時間カラム以外のカラムは結合されるようにしたいと考え以下のプログラムを作成しました。

    let schedule_Html = `<caption class="schedule_title">${day + '日'}</caption>`;
    schedule_Html += `<tr style="text-align: center;">`;
    // 予約状況テーブルのカラム作成
    schedule_Html += `<td class="schedule_columns" width=200>${schedule_tb_columns[0]}</td>`;
    schedule_Html += `<td class="schedule_columns" width=250>${schedule_tb_columns[1]}</td>`;
    schedule_Html += `<td class="schedule_columns" width=255>${schedule_tb_columns[2]}</td>`;
    schedule_Html += `</tr>`;

    schedule_Html += '<tbody class="scroll">';
    var flag = 0;
    for (let i=0; i < time_schedule.length; i++){
        schedule_Html += '<tr style="text-align: center;">';
        // 時間表記部分のrowを作成
        schedule_Html += `<td class="schedule_time_td" width=200>${time_schedule[i]}</td>`;
        var rowspan_index = 2;
        if (day_schedule[i][1] == "1"){
            if (flag > 0){
                // 結合したrow数分減らす
                flag -= 1;
            }
            else if (day_schedule[i][0] == null){
                schedule_Html += `<td class="schedule_time_td" width=250></td>`;
                schedule_Html += `<td class="schedule_time_td" width=255></td>`;
            }
            else if (day_schedule[i][0] != null){
                schedule_Html += `<td class="schedule_time_td" width=250>${day_schedule[i][0] + '様'}</td>`;
                schedule_Html += `<td class="schedule_time_td" width=255>${day_schedule[i][2]}</td>`;
            }
        }
        else{
            // 時間表記部分のindexを作成
            if (flag == 0){
                schedule_Html += `<td rowspan=2 class="schedule_time_td" width=250>${day_schedule[i][0] + '様'}</td>`;
                schedule_Html += `<td rowspan=2 class="schedule_time_td" width=255>${day_schedule[i][2]}</td>`;
                flag = rowspan_index - 1;
             }
        }
        schedule_Html += '</tr>';
    }
    schedule_Html += '</tbody>';
    return schedule_Html;

上記リストのday_scheduleは二次元配列となっていて、各要素に[予約者名、施術時間(何セル分か)、メニュー名]が保存されています。
([[予約者名、施術時間(何セル分か)、メニュー名], [予約者名、施術時間(何セル分か)、メニュー名], ...])
上記のようにrowspanの値を数字にすると以下の画像のようにイメージ通りの出力となります。

しかし、rowspanの値を変数(上記のプログラムではrowspan_index)にした場合名前、メニューの蘭が以下の画像のようにずれてしまいます。

rowspanに入っている値は共に2だと考えられるため、現状原因がわからない状態です。
変数を入れた場合にうまくいかない原因について教えていただきたいです。
よろしくお願いします。

追記

うまくいかなかった場合のコードです。

let schedule_Html = `<caption class="schedule_title">${day + '日'}</caption>`;
    schedule_Html += `<tr style="text-align: center;">`;
    // 予約状況テーブルのカラム作成
    schedule_Html += `<td class="schedule_columns" width=200>${schedule_tb_columns[0]}</td>`;
    schedule_Html += `<td class="schedule_columns" width=250>${schedule_tb_columns[1]}</td>`;
    schedule_Html += `<td class="schedule_columns" width=255>${schedule_tb_columns[2]}</td>`;
    schedule_Html += `</tr>`;

    schedule_Html += '<tbody class="scroll">';
    var flag = 0;
    for (let i=0; i < time_schedule.length; i++){
        schedule_Html += '<tr style="text-align: center;">';
        schedule_Html += `<td class="schedule_time_td" width=200>${time_schedule[i]}</td>`;
        var rowspan_index = 2;
        if (day_schedule[i][1] == "1"){
            if (flag > 0){
                // 結合したrow数分減らす
                flag -= 1;
            }
            else if (day_schedule[i][0] == null){
                schedule_Html += `<td class="schedule_time_td" width=250></td>`;
                schedule_Html += `<td class="schedule_time_td" width=255></td>`;
            }
            else if (day_schedule[i][0] != null){
                schedule_Html += `<td class="schedule_time_td" width=250>${day_schedule[i][0] + '様'}</td>`;
                schedule_Html += `<td class="schedule_time_td" width=255>${day_schedule[i][2]}</td>`;
            }
        }
        else{
            // 時間表記部分のindexを作成
            if (flag == 0){
                schedule_Html += `<td rowspan=rowspan_index class="schedule_time_td" width=250>${day_schedule[i][0] + '様'}</td>`;
                schedule_Html += `<td rowspan=rowspan_index class="schedule_time_td" width=255>${day_schedule[i][2]}</td>`;
                flag = day_schedule[i][1]-1;
             }
        }
        schedule_Html += '</tr>';
    }
    schedule_Html += '</tbody>';

Comments

[maisumakun]

> rowspanの値を変数(上記のプログラムではrowspan_index)にした場合

この場合はどのようなコードを書きましたか？（単に書き間違えた、ということも考えられます）

[Tera0724]

回答ありがとうございます。
うまくいかなかった場合のコードを追記しました。
変数はint型で、rowspan=rowspan_indexと直接繋ぎました。

Answer 1

schedule_Html += '<td rowspan=rowspan_index class="schedule_time_td"
```は
```ここに言語を入力
schedule_Html += '<td rowspan='+rowspan_index+' class="schedule_time_td"
```でしょうか？

Comments

[Tera0724]

コメントありがとうございます。囲い方についてはテンプレートリテラルを使用していました。

Answer 2

schedule_Html += `<td rowspan=rowspan_index （後略）`

このコードでは、「rowspanの値を変数に」できていません。rowspanへrowspan_indexという値（変数ではなく、書いた通りの文字列）を設定した扱いになっています。

Comments

[Tera0724]

回答ありがとうございます。
「`」を使った書き方ではなく、「'」に変更したら流れるようになりました。