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

縦方向のセル結合

横方向のセル結合が出来たのですが、縦方向のセル結合を採り入れると、予想の通り縦横の結合セルが「交差」した場合の問題が出て来ました。 テストして見たのですが、十字に交差した結合セルの設定自体は可能ですが、片方のセルの内容が他方の上に表示されたりして、実用上は無意味でした。

 

 

そこからやはり、「セル結合は他の結合セルを侵さない」という仕様は、プログラムを組む上で妥当と判断しました。

 

前バージョンでは、結合セルは「横方向の結合」が前提でした。 そのため、他の結合セルとの衝突を避けるには、右横のセルに「colspan」の属性がなければ良いという判定だけで済みました。

 

ver.4.3   436行～

for(let k=start+1; k<end; k++){
    if(tdAll[k]){
        if(tdAll[k].getAttribute('colspan')){
            join_harea.value=join_harea.value/1 -1; } // セル選択を不能に
        else{
            tdAll[k].classList.add('join_active'); }

 

しかし、縦方向の結合セルへの交差も考慮すると、下の様に判定が複雑になります。 結合セルは、その下に「非表示」のセルが隠れているので、それに出会った場合も選択できなくする必要があるわけです。

 

ver.4.4   539行～

if(k>stp + attr_value/1 -1){
    if(scout.getAttribute('rowspan') ||
       scout.getAttribute('colspan') || scout.style.display=='none'){
        join_area.value=join_area.value/1 -1; } // セル選択を不能に
    else{
        scout.classList.add('join_active'); }}
else{
    scout.classList.add('join_active'); }

 

これで、結合範囲の交差の問題は解決しましたが、縦横方向の操作の切換えも、工夫が必要でした。

 

またコードが増えたので、纏められる操作は関数化してブラシュアップしました。 最終的には「セル結合」のコードは「TRIM機能」を超える 180行程になりました。

 

今回の「セル結合」の導入で、ブログ掲載の「表」を生成するツールとして、満足できるものになったと思います。

 

 

 

セル結合の操作 

「セル結合」や他の主要機能は、以下のショートカットで起動します。

 

①「Blog Table ⭐」の起動「Ctrl+F1」

 

➁ 主要機能の起動

　　▪「Ctrl+左Click」：「表作成」または「表更新」の主機能

　　▪「Alt+左Click」：「TRIM機能」

　　▪「Ctrl+Alt+左Click」：「セル結合」

 

➂ 「Blog Table ⭐」の終了「Ctrl+F1」

 

 

● 一番最初に「Ctrl+Alt+左Click」で「結合開始セル」を指定します。

 

▪ 指定したセルは色が反転表示されます。

 

 

 

●「結合方向」のボタンを「左Click」するごとに「▶」⇄「▼」が切換ります。

 

▪ 既に結合したセルは結合方向を変えられません。 範囲を「1」に変更して「実行」を押すと、結合が解除されるので結合結合方向を変更できます。

 

● 「範囲」で、結合するセルの範囲を指定して「実行」を「左Click」します。

 

 

 

▪ 通常「結合開始セル」を指定した最初の範囲は「1」で、この数は結合するセルの総数を意味します。

 

▪ 範囲の指定値に従って反転部分が増減します。

 

 

● 結合されたセルを「Ctrl+Alt+左Click」で選択すると、パネルの「セルの範囲」には結合されたセル数が表示されます。 その数を変更して「実行」を「左Click」すると、結合セルを全て解除したり、結合する個数を変更したりできます。

 

下は、「5個」の結合セルの結合を解除する様子です。

 

 

 

● セル結合を指定する「範囲」は、行方向は右側に、列方向は下側に「結合セル」がある場合は、その手前までしか選択できません。

 

下の例では、「A5」の「結合セル」があるため、「A列」と「F列」で、列方向のセル結合を指定できる範囲が異なっています。

 

 

 

 

「Blog Table ⭐」の使い方 

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

 

 

 

 

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

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

 

 

 

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

 

 

 

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

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

 

 

 

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

 

 

 

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

 

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

 

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

 

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

 

 

 

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

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

 

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