表作成ツール「Blog Table ⭐」セル結合の導入（4）/ JavaScript

「thead」要素の導入

これまでの「Blog Table ⭐」は、生成する「table要素」の「thead要素」を省略して来ました。 HTMLの規則では省略が可能で必要が無かったためですが、前ページで書いた様に、最上行でセル結合をすると「Fix」モードの列幅調整が出来なくなる問題を解決するために、「thead要素」を利用する事にしました。

下は、「ver.4.5」以降に生成する「table要素」の HTML構成で、「thead要素」を追加しています。

「thead要素」は、本来は「表」の最上行で「列の見出しを定義する」ためのパーツですが、「Blog Table ⭐」では列幅をコントロールするために使い、非表示にしています。

これまでの「表」の互換を保つ 

これまでは「thead要素」が無く、「tbody要素」の最初の行を最上行としていたので、その行の「td要素」にセル幅（列幅）の「width値」を指定していました。 

これに対して、今後は「thead要素」の「td要素」に「width値」を指定する事になり、これまでに作った「表」を「表更新」する際には自動的に「thead要素」を付加し、「tbody要素」の「width値」を「thead要素」へコピーする様にしました。

「表更新」をしない「表」はそのままで問題はなく、今後に「表作成」または「表更新」をした「表」は、「thead要素」が列幅を管理する事になります。

〔追記〕2024.02.09

「TRIM機能」が大変扱い難くなっているのを、「ver.4.5」の公開後に気付きました。「ver.4.6」で改善する予定です。

セル結合した表の列幅の操作 

セル幅（列幅）を調整する操作自体はこれまでと変わりません。 しかし「thead要素」の導入で、結合セルの下にある列の幅調節が、自由に出来る様になりました。

下は、その様子です。「B1」「E1」「D1」のセル幅（列幅）を結合セル越しに正確に調節できる点が、これまでと異なります。

少し苦労した点 

「thead」の「td」要素（セル）は、「tbody」と同数が並びますが、非表示にするために「border: none」「height: 0」「padding-top:0」などを指定しています。

「Blog Table ⭐」 ver.4.5　1350行～

if(!r_table.querySelector('thead')){
    let th_tr=r_table.createTHead().insertRow();
    th_tr.style.background='none';
    th_tr.style.lineHeight='0';
    for(let j=0; j<col.value; j++){
        let add_td=iframe_doc.createElement('td');
        add_td.style.border='none';
        add_td.style.height='0';
        add_td.style.paddingTop='0';
        if(t_td[j].style.width){
            add_td.style.width=t_td[j].style.width; // width指定をコピー
            t_td[j].style.width=''; } // width指定をリセット
        th_tr.appendChild(add_td); }} // Headerの追加

上は「表更新」で対象の「表」の選択時に、自動で実行されます。「thead要素」を生成する部分ですが、太字が生成する「td要素」を非表示に指定するコードです。

これで「thead要素」が非表示になりますが、セル幅の設定時には、操作対象のセル（列）を示す青いバー表示が必要です。 これはフロート表示をさせたかったのですが、隠した「thead要素」の「td要素」を表示させるしか方法がありませんでした。 選択した「td要素」だけ「padding-top: 6px」を指定して高さを持たせ、その内部に「box-shadow」を指定してバーを表示させています。

この方式のため、「セル幅の設定パネル」を開くとバーの高さだけ「表」が下方にズレ、設定パネルを閉じると元の位置に戻ります。

これはまあ看過できますが、2重枠線の上辺と底辺で線の間隔が揃わなくなりました。

「線幅」でマイナス値を設定して表更新をすると2重枠線になりますが、下の様に上辺だけ間隔が広くなります。 これは高さ「0」の「thead」が、表上辺と下の「tbody」との間にあるためで、「table要素」の仕様上で改善できません。

上は未だ差が少ない方で、「-5px」等の指定では上下の差が「5px」になり目立ちます。 上辺の間隔は減らせないので、「tbody」要素を開いた間隔の1/2だけ上方にずらして表示する様にしました。

#ambt0 tbody { transform: translateY(-2px); } 

上は「セル間隔が4px」の2重枠線の場合で、4px/2 だけ「tbody」を上方にずらして表示します。 妥協的な対策ですが、なんとか見れる様になりました。

「Blog Table ⭐」の使い方 

以下のページのマニュアルに、詳しい操作方法を纏めています。

表作成ツール「Blog Table ⭐」マニュアル / JavaScript

「Blog Table ⭐」を利用するには 

「Blog Table ⭐」のコードは「Github」で配布しています。

Blog_Table/Blog_Table_4.5 at main · personwritep/Blog_Table

このリンク先は下の様な画面で、ここでコードのコピーが可能です。

❶ 赤枠のところに、コピー用のボタンがあります。 これをクリックします。

　これで、ページ上のコードがクリップボードにコピーされます。

❷「Tampermonkey」の管理画面で「＋」マークの「新規スクリプト」を開きます。

❸「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠にしてください。

❹ 編集枠内をクリックして「Ctrl+V」を押すか、右クリックして「貼り付け」を選択します。

➎ コードの先頭までスクロールして、最初の行から正しく貼り付けられたかを確認してください。

❻ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

「Blog Table ⭐」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「Blog Table ⭐」の最新バージョンのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）