なでしこさんにグリッドが欲しい❗️　完結編　～プラグインにするよ！～


　この記事は、先の二記事を読んでいる前提で書かれています。

https://qiita.com/snowdrops89/items/dd0ad18c4197b132bcfa

https://qiita.com/snowdrops89/items/e3e8c49b8f770062f679

 # 行を追加出来るようにする
　ワタクシうっかりしておりましたが、前編の編集できるテーブルには必要な機能がもう一つありました。
　ユーザーがデータを追加していける機能です。

　ｖ１のグリッドでは必ず最終行に空行が付いてきて、それを利用して新しいデータを追加していくことになっていました。
　と言っても行の追加自体は自分で行う必要があって、たしか最後の空行に文字入力した状態で、

```
テストグリッドのアイテムはテストグリッドのアイテム
```
　みたいにすると、また空行が付いた状態に更新されるんだったかな？

　それならもう、いっそ好きに一行追加できるの方が良さそうじゃないですか？
　普通に考えると、`データの表行数`の位置に空のデータを入れてテーブルセル変更してやるだけで良さそうなんですが・・・
<blockquote><font color="black">テストデータ</font><font color="#cc0099">＝</font><font color="maroon">「名前,ふりがな,点数<br>太郎,たろう,55<br>花子,はなこ,100<br>一郎,いちろう,80」</font><font color="#cc0000">を</font><font color="#660099">CSV取得</font>。<br><font color="black">テストテーブル</font><font color="#cc0099">＝</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">テーブル作成</font>。<br><br><font color="black">テストテーブル</font><font color="#cc0000">の</font><font color="#cc0099">[</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">表行数</font>,<font color="#0000cc">0</font><font color="#cc0099">]</font><font color="#cc0000">を</font><font color="#cc0099">[</font><font color="#cc0099">[</font><font color="#660099">空</font>,<font color="#660099">空</font>,<font color="#660099">空</font><font color="#cc0099">]]</font><font color="#cc0000">に</font><font color="black">テーブルセル変更</font>。</blockquote>

![値のない行は細くなる.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/f8d6d010-c743-3344-5315-4bce1aca77b4.jpeg)

　こんな風に細くなっちゃうのねん💧
　文字が入ってないからね、フォントサイズ分ね（line-heightもかな？）
　この細い状態でもちゃんと文字入力は出来るし、一箇所でも文字が入ればそれに合わせてセルの高さが調整されて揃うので問題ないのですが、やっぱりそんなのかっちょわるいですよね～？！　察して最初から揃えといておくれよ～ｗ

　ここで早速前回覚えた新しいじゅもーん！
　ユキノは getComputedStyle をとなえた！！

<blockquote><font color="#660099">WINDOW</font><font color="#cc0000">の</font><font color="maroon">「getComputedStyle」</font><font color="#cc0000">を</font><font color="black">テストテーブル</font><font color="#cc0099">[</font><font color="maroon">"rows"</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="#0000cc">1</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="maroon">"cells"</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="#0000cc">0</font><font color="#cc0099">]</font><font color="#cc0000">で</font><font color="#660099">JSメソッド実行</font>。<br><font color="black">セル高さ</font><font color="#cc0099">＝</font><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">height</font>。<br><font color="black">セル高さ</font><font color="#cc0000">を</font><font color="#660099">表示</font>。</blockquote>

　0行目はヘッダ（タイトル行）なので、実際のデータは1行目から。
　1行目は絶対あるハズなので、その0列目、一番最初のセルの高さを調べてみます。
　`24px`と出ました。
　合っています！
　CSSから設定されたフォントサイズや行高さの反映されたセルの高さがバッチリ取得出来ました！
 それを、追加された最終行のセルに設定してやれば良いハズ。

　どうせなら簡単に[行,列]で指定して簡単にセルが取得できるといいかな？
　また、空行を追加するのも、ちゃんとデータの列数分セルを追加できるように直して・・・
　こんな感じ？

<blockquote><font color="#009900">#&nbsp;テーブルを作成</font><br><font color="black">テストデータ</font><font color="#cc0099">＝</font><font color="maroon">「名前,ふりがな,点数<br>太郎,たろう,55<br>花子,はなこ,100<br>一郎,いちろう,80」</font><font color="#cc0000">を</font><font color="#660099">CSV取得</font>。<br><font color="black">テストテーブル</font><font color="#cc0099">＝</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">テーブル作成</font>。<br><br><font color="#009900">#&nbsp;末尾に空行を追加</font><br><font color="black">空行</font><font color="#cc0099">＝</font><font color="#660099">空配列</font>。<br><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">表列数</font><font color="#cc0099">回</font>。<font color="black">空行</font><font color="#cc0000">に</font><font color="#660099">空</font><font color="#cc0000">を</font><font color="#660099">配列追加</font><font color="#cc0099">。。。<br></font><font color="black">テストテーブル</font><font color="#cc0000">の</font><font color="#cc0099">[</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">表行数</font>,<font color="#0000cc">0</font><font color="#cc0099">]</font><font color="#cc0000">を</font><font color="#cc0099">[</font><font color="black">空行</font><font color="#cc0099">]</font><font color="#cc0000">に</font><font color="black">テーブルセル変更</font>。<br><br><font color="#009900">#&nbsp;最初のセルからセルの高さを取得</font><br><font color="#660099">WINDOW</font><font color="#cc0000">の</font><font color="maroon">「getComputedStyle」</font><font color="#cc0000">を</font><font color="#cc0099">(</font><font color="black">テストテーブル</font><font color="#cc0000">から</font><font color="#cc0099">[</font><font color="#0000cc">1</font>,<font color="#0000cc">0</font><font color="#cc0099">]</font><font color="#cc0000">の</font><font color="black">テーブルセル取得</font><font color="#cc0099">)</font><font color="#cc0000">で</font><font color="#660099">JSメソッド実行</font>。<br><font color="black">セル高さ</font><font color="#cc0099">＝</font><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">height</font>。<font color="#009900">//セル高さを表示。</font><br><br><font color="#009900">#&nbsp;それを追加された行の0列目のセルに反映</font><br><font color="black">テストテーブル</font><font color="#cc0000">から</font><font color="#cc0099">[</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">表行数</font>,<font color="#0000cc">0</font><font color="#cc0099">]</font><font color="#cc0000">の</font><font color="black">テーブルセル取得</font>。<br><font color="#cc0099">それ</font><font color="#cc0000">の</font><font color="maroon">「高さ」</font><font color="#cc0000">に</font><font color="black">セル高さ</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。<br><br><font color="#009900">#&nbsp;[行,列]でセルの要素を取得する</font><br><strong><font color="#cc0099">●(テーブルから行列の)テーブルセル取得</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="#cc0099">[</font><font color="black">行</font>,<font color="black">列</font><font color="#cc0099">]</font><font color="#cc0099">＝</font><font color="black">行列</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テーブル</font><font color="#cc0099">[</font><font color="maroon">"rows"</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="black">行</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="maroon">"cells"</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="black">列</font><font color="#cc0099">]</font><font color="#cc0000">を</font><font color="#cc0099">戻す</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>

![一行追加.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/4d52065e-dcc5-1d80-14d7-cbd3188a5115.jpeg)

　見事サイズの揃った空行が出来ました🎶

## 編集できるようにする
　でもこれはまだ、ただの空行を追加しただけです。
　追加した行にも編集出来る設定を付けられるようにする必要があります。
　前編の編集出来るテーブルの中心、セルを編集可能にする部分を反復の中に直接書いていましたが、関数にして外へ出し、行追加部分からも呼び出せるようにします。

　そして！　ワタクシこれまたうっかりしておりましたが～。
　すでにデータが入ってる部分も、編集で一行全て空にしてしまったら同様に細くなっちゃうんですよね～。
　セル高さの設定は、行追加部分から編集可能設定部分へ移し、全てのセルに行高さを設定しちゃうことにしちゃいます。

<blockquote><font color="#009900">#&nbsp;テーブルを作成</font><br><font color="black">テストデータ</font><font color="#cc0099">＝</font><font color="maroon">「名前,ふりがな,点数<br>太郎,たろう,55<br>花子,はなこ,100<br>一郎,いちろう,80」</font><font color="#cc0000">を</font><font color="#660099">CSV取得</font>。<br><br><font color="black">テストテーブル</font><font color="#cc0099">＝</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">テーブル作成</font>。<br><font color="black">テストテーブル</font><font color="#cc0000">の</font><font color="black">テーブル編集可能</font>。<br><br><font color="black">確認ボタン</font><font color="#cc0000">は</font><font color="maroon">「データ確認」</font><font color="#cc0000">の</font><font color="#660099">ボタン作成</font>。<br><font color="black">確認ボタン</font><font color="#cc0000">を</font><font color="#660099">クリックした時</font><font color="#cc0000">には</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストデータ</font><font color="#cc0000">を</font><font color="#660099">JSONエンコード</font><font color="#cc0000">して</font><font color="#660099">表示</font>。<br><font color="#cc0099">ここまで</font>。<br><font color="black">追加ボタン</font><font color="#cc0000">は</font><font color="maroon">「一行追加」</font><font color="#cc0000">の</font><font color="#660099">ボタン作成</font>。<br><font color="black">追加ボタン</font><font color="#cc0000">を</font><font color="#660099">クリックした時</font><font color="#cc0000">には</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストテーブル</font><font color="#cc0000">に</font><font color="black">テーブル行追加</font><br><font color="#cc0099">ここまで</font>。<br><br><strong><font color="#cc0099">●(テーブルの)テーブル編集可能</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="black">全セル</font><font color="#cc0099">＝</font><font color="black">テーブル</font><font color="#cc0000">の</font><font color="maroon">「td」</font><font color="#cc0000">を</font><font color="#660099">DOM子要素全取得</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">全セル</font><font color="#cc0000">を</font><font color="#cc0099">反復</font>。<font color="black">テーブル</font><font color="#cc0000">の</font><font color="#cc0099">対象</font><font color="#cc0000">に</font><font color="black">編集可能セル設定</font><font color="#cc0099">。。。<br><br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#009900">#&nbsp;セル内の改行入力を禁止する。</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テーブル</font><font color="#cc0000">の</font><font color="#660099">キー押した時</font><font color="#cc0000">には</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#cc0099">もし</font>、<font color="#660099">押されたキー</font><font color="#cc0099">＝</font><font color="maroon">「Enter」</font><font color="#cc0000">ならば</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#660099">対象イベント</font><font color="#cc0000">の</font><font color="#660099">DOMイベント処理停止</font>。<br><font color="#cc0099">ここまで</font>。<br><br><strong><font color="#cc0099">●(テーブルに)テーブル行追加</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">空行</font><font color="#cc0099">＝</font><font color="#660099">空配列</font>。<font color="black">追加行</font><font color="#cc0099">＝</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">表行数</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">表列数</font><font color="#cc0099">回</font>。<font color="black">空行</font><font color="#cc0000">に</font><font color="#660099">空</font><font color="#cc0000">を</font><font color="#660099">配列追加</font><font color="#cc0099">。。。<br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="black">テーブル</font><font color="#cc0000">の</font><font color="#cc0099">[</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">表行数</font>,<font color="#0000cc">0</font><font color="#cc0099">]</font><font color="#cc0000">を</font><font color="#cc0099">[</font><font color="black">空行</font><font color="#cc0099">]</font><font color="#cc0000">に</font><font color="black">テーブルセル変更</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;追加された行の全セルに編集可能設定を付ける</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストデータ</font><font color="#cc0099">[</font><font color="black">追加行</font><font color="#cc0099">]</font><font color="#cc0099">＝</font><font color="#660099">空配列</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">表列数</font><font color="#cc0099">回</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストデータ</font><font color="#cc0099">[</font><font color="black">追加行</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="#660099">回数</font><font color="#cc0099">-</font><font color="#0000cc">1</font><font color="#cc0099">]</font><font color="#cc0099">＝</font><font color="#660099">空</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テーブル</font><font color="#cc0000">から</font><font color="#cc0099">[</font><font color="black">追加行</font>,<font color="#660099">回数</font><font color="#cc0099">-</font><font color="#0000cc">1</font><font color="#cc0099">]</font><font color="#cc0000">の</font><font color="black">テーブルセル取得</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テーブル</font><font color="#cc0000">の</font><font color="#cc0099">それ</font><font color="#cc0000">に</font><font color="black">編集可能セル設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">ここまで</font>。<br><font color="#cc0099">ここまで</font>。<br><br><strong><font color="#cc0099">●(テーブルのセルに)編集可能セル設定</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;最初のセルからセルの高さを取得</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#660099">WINDOW</font><font color="#cc0000">の</font><font color="maroon">「getComputedStyle」</font><font color="#cc0000">を</font><font color="#cc0099">(</font><font color="black">テーブル</font><font color="#cc0000">から</font><font color="#cc0099">[</font><font color="#0000cc">1</font>,<font color="#0000cc">0</font><font color="#cc0099">]</font><font color="#cc0000">の</font><font color="black">テーブルセル取得</font><font color="#cc0099">)</font><font color="#cc0000">で</font><font color="#660099">JSメソッド実行</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">セル高さ</font><font color="#cc0099">＝</font><font color="#cc0099">それ</font><font color="#cc0099">.</font><font color="black">height</font>。<font color="#009900">//セル高さを表示。</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">セル</font><font color="#cc0000">の</font><font color="maroon">「高さ」</font><font color="#cc0000">に</font><font color="black">セル高さ</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">セル</font><font color="#cc0099">.</font><font color="black">contentEditable</font><font color="#cc0099">＝</font><font color="#660099">true</font>。<font color="#009900">#&nbsp;編集可能にする</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">セル</font><font color="#cc0000">の</font><font color="maroon">「blur」</font><font color="#cc0000">が</font><font color="#660099">DOMイベント発火した時</font><font color="#cc0000">には</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#cc0099">もし</font>、<font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">nodeName</font><font color="#cc0099">＝</font><font color="maroon">「TD」</font><font color="#cc0000">ならば</font>、<font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#009900">#&nbsp;改行を含むコピペ対策</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テキスト</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">textContent</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0000">に</font><font color="black">テキスト</font><font color="#cc0000">を</font><font color="#660099">テキスト設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;テーブル数値右寄せ</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="#660099">DOM部品オプション</font><font color="#cc0099">.</font><font color="maroon">「テーブル数値右寄せ」</font><font color="#cc0099">＝</font><font color="#660099">true</font><font color="#cc0000">ならば</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テキスト</font><font color="#cc0000">を</font><font color="#660099">数列か判定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="#cc0099">それ</font><font color="#cc0000">が</font><font color="#660099">true</font><font color="#cc0000">ならば</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0000">の</font><font color="maroon">「行揃え」</font><font color="#cc0000">に</font><font color="maroon">「右」</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">違えば</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">対象</font><font color="#cc0000">の</font><font color="maroon">「行揃え」</font><font color="#cc0000">に</font><font color="maroon">「左」</font><font color="#cc0000">を</font><font color="#660099">DOMスタイル設定</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">ここまで</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">ここまで</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#009900">#&nbsp;セルの内容をデータに反映</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">行</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font><font color="#cc0000">の</font><font color="black">セル行番号</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">列</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font><font color="#cc0000">の</font><font color="black">セル列番号</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="#cc0099">(</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">表行数</font><font color="#cc0099">)</font><font color="#cc0099">≦</font><font color="black">行</font><font color="#cc0000">ならば</font>、<font color="black">テストデータ</font><font color="#cc0099">[</font><font color="black">行</font><font color="#cc0099">]</font><font color="#cc0099">＝</font><font color="#660099">空配列</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テストデータ</font><font color="#cc0099">[</font><font color="black">行</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="black">列</font><font color="#cc0099">]</font><font color="#cc0099">＝</font><font color="black">テキスト</font>。<br><font color="#cc0099">ここまで</font>。<br><br><strong><font color="#cc0099">●(セルの)セル行番号</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">セル</font><font color="#cc0099">.</font><font color="black">parentNode</font><font color="#cc0099">.</font><font color="black">rowIndex</font><font color="#cc0000">を</font><font color="#cc0099">戻す</font>。<br><font color="#cc0099">ここまで</font>。<br><br><strong><font color="#cc0099">●(セルの)セル列番号</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">セル</font><font color="#cc0099">.</font><font color="black">cellIndex</font><font color="#cc0000">を</font><font color="#cc0099">戻す</font>。<br><font color="#cc0099">ここまで</font>。<br><br><strong><font color="#cc0099">●(テーブルから行列の)テーブルセル取得</font></strong><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">変数</font>&nbsp;<font color="#cc0099">[</font><font color="black">行</font>,<font color="black">列</font><font color="#cc0099">]</font><font color="#cc0099">＝</font><font color="black">行列</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="black">テーブル</font><font color="#cc0099">[</font><font color="maroon">"rows"</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="black">行</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="maroon">"cells"</font><font color="#cc0099">]</font><font color="#cc0099">[</font><font color="black">列</font><font color="#cc0099">]</font><font color="#cc0000">を</font><font color="#cc0099">戻す</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>
　できました！
 
https://n3s.nadesi.com/id.php?2929

# 機能を複数付けたい
　これまではとりあえず簡単にやってみるため、機能をそれぞれ別々に作ってきましたが、複数の機能を同時に使いたいことありますよね、当然。
　それぞれを関数化して試してみたところ、うまく行かない部分や、ｖ１のグリッドと動作を合わせるかどうか考えたい部分も出てきました。

### 編集と行選択
　ｖ１のグリッドでは、この二つは両立しません。
　行選択がオンでも、編集をオンにすると、行選択は無効になります。
　でも別に、あえて無効にすることは無いんじゃない？
 
　こちらの行選択はtrに色を付けてるだけなので機能が干渉することはないし、編集中の行が分かりやすくなる。
　不要なら行選択を付けなきゃいいだけの話なのでこのままにしておく。

### セル幅変更と自動ソート
　自動ソートすると変更したセル幅が元に戻っちゃう！　ということが発覚💦
　セル幅を変えようとするとヘッダ部分を触ることになるので自動ソートも勝手に行われてしまうため実質セル幅変更が出来ない。
　自動ソートを、表ソート後テーブル更新することにしていたので、セル幅のみならず色々な設定がまるっと全部書き換えられてしまうのでした
　テーブルセル変更を使ってセル部分だけを更新するように修正。

　また、ソート記号は、セル幅変更が先に設定されている場合はthではなくリサイズ用のdivの方に付けなければ変なことになる。

　セル幅を変えようとすると自動ソートも勝手に行われてしまう件は、ｖ１のグリッドもそうなので、とりあえずよしとすることに（え）

### 行選択と自動ソート
　自動ソートすると選択状態が消えちゃう問題は👆で自動ソートをテーブルセル変更にしたことで解消。

　行選択中に自動ソートが行われても選択行は変わりません。
　セルの内容が変わっても、一行目なら一行目、三行目なら三行目が選択されたまんま。
　気持ちとしては、選択行は選択していたデータにくっついて移動して欲しい感がないですか？
　でも、これも、ｖ１のグリッドと同じなのでとりあえずそのまま（ええっ）

### 編集とセル幅変更
　編集で元のセル幅よりも長くなった場合、リサイズを付けたdivとthの幅が合わなくなっちゃう。
　長いデータが入った時、セル幅をデータより狭く出来ない。
　セルの`overflow`を`hidden`にしたり、`white-space`を`nowrap`にしたり、`text-overflow`を`ellipsis`にしてみたりなどなどするが、出来ない！
　調べると、divの場合はこれでできるんだけど、テーブルセル内ではもうひとつ、`max-width`を付ける必要があるそうです！
　でも、これはこれで問題があって、セル幅の自動調整が効かなくなってしまうのです。
　自動調整はして欲しいけど、リサイズで小さくも出来るようにしたいんですよよよ～。

　苦肉の策として、フォーカスが当たったら`max-width`を`none`にしてセル幅の自動調整を有効にし、外れたら`max-width`を0にしてセル幅変更を有効にすることに・・・
　結構いい感じ？　なのですが、狭くしてある長い文字列の入ったセルにフォーカスを当てると、セル幅がびよよんっと元に戻っちゃうんですよね～。
　フォーカスを当てるってコトは、中身を見たいか編集したいかなんだから、い、いいよね？💧

 ### 自動ソート
　数値の場合の自動ソートが、なぜか後編で作ったサンプルの場合と違うんです！
　数値なのになぜか表数値ソートを使わなくてもいい感じにソートされていたのですが、今はv1同様100が55や80よりも小さいと判定されている。
　なでしこさんのバージョンを揃えてみてもやっぱり結果が異なるので何故なのかサッパリ分からん💧
　もっとも現状が正しい状態のような気はするので、やっぱりそのうち数値は表数値ソートを使えるようにしたい。
　でももう時間が無いのと、これがv1と同じ状態というわけで、とりあえずはこのまま～😅

# プラグインにする
　折角なのでプラグインにすることに！

## 変数をテーブルに持たせる
　テーブルを二つ以上作った場合、「昇順」や「前クリックセル」などの変数が共用になってしまいおかしなコトになっちゃう。
　色の違うテーブルを作ろうものなら、行選択や行追加でDOM部品オプションのテーブル背景色を参照しているため、最後に作ったテーブルの色が反映されちゃう。
　また、これまではとりあえずのお試しだったので、編集や自動ソートでは直接テストデータを編集したり表ソートしたりしているけど、もちろんそんなわけにはいきません。
　個々の設定をそれぞれのテーブルDOMそのものに持たせる必要があります。

### データ属性設定とポケット設定
　なでしこさんの新機能の一つです✨
　ポケットについては22日目に、クジラ飛行机氏自ら解説して下さっていますので、是非お読み下さい～。

https://qiita.com/kujirahand/items/54b6ae9556dd4da5c976

　ポケットはユーザーが使いたいコトもあるかもしれないから空けておくことにして、データ属性を使います。

👉[**なでしこ3 マニュアル > plugin_browser/データ属性設定**](https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E3%83%87%E3%83%BC%E3%82%BF%E5%B1%9E%E6%80%A7%E8%A8%AD%E5%AE%9A&show)

　好きに名前を付けられていくつも設定出来るのが良い所ですよ。

<blockquote><font color="black">テーブル</font><font color="#cc0000">の</font><font color="maroon">「昇順」</font><font color="#cc0000">に</font>、<font color="#660099">はい</font><font color="#cc0000">を</font><font color="black">データ属性設定</font>。</blockquote>

　などと設定しておけば、
<blockquote><font color="black">昇順</font><font color="#cc0099">＝</font><font color="black">テーブル</font><font color="#cc0000">の</font><font color="maroon">「昇順」</font><font color="#cc0000">を</font><font color="black">データ属性取得</font>。</blockquote>

　と、取得して、後のコードは今まで通りで出来ます🎶

　
　テーブル背景色は、配列です。
　説明によると、『DOMの制約で基本的に文字列しか設定できません。辞書型や配列型を設定したい場合には「ポケット設定」を使うと良いでしょう』とあるのですが、「JSONエンコード」すればＯＫです。
<blockquote><font color="black">テーブル背景色</font><font color="#cc0099">＝</font><font color="#660099">DOM部品オプション</font><font color="#cc0099">.</font><font color="black">テーブル背景色</font>。<br><font color="black">テーブル背景色</font><font color="#cc0099">＝</font><font color="black">テーブル背景色</font><font color="#cc0000">を</font><font color="#660099">JSONエンコード</font>。<br><font color="black">テーブル</font><font color="#cc0000">の</font><font color="maroon">「背景色」</font><font color="#cc0000">に</font><font color="black">テーブル背景色</font><font color="#cc0000">を</font><font color="black">データ属性設定</font>。</blockquote>

　取り出す時はもちろん「JSONデコード」忘れず。
<blockquote><font color="black">行色情報</font><font color="#cc0099">＝</font><font color="black">テーブル</font><font color="#cc0000">の</font><font color="maroon">「背景色」</font><font color="#cc0000">を</font><font color="black">データ属性取得</font><font color="#cc0000">して</font>、<font color="#660099">JSONデコード</font>。</blockquote>

　ポケットも、ユーザーが一手間掛けなくても良いよう、内部でエンコードとデコードを行ってくれているものと思う。

　
　問題は「前クリックセル」。
　さすがにDOMの参照は入れられないしどうすっかなーと思って、直接プロパティに設定してみるとゆう暴挙！

　しかもナゼか、
<blockquote><font color="black">テーブル</font><font color="#cc0099">.</font><font color="black">前クリックセル</font><font color="#cc0099">＝</font><font color="#cc0099">対象</font>。</blockquote>

　と、直接代入し、
<blockquote><font color="black">テーブル</font><font color="#cc0000">の</font><font color="maroon">「前クリックセル」</font><font color="#cc0000">を</font><font color="#660099">DOM属性取得</font>。</blockquote>

　と、「DOM属性取得」で取得しないとうまく行かないんだよね～（？）
　・・・とりま、これでうまく動いたからヨシ！🙏

 

## できました
　他にも色々紆余曲折がありましたが！
　取り上げるほどの内容でもない&時間が無いので、はしょって完成です🤣
 
https://n3s.nadesi.com/id.php?2930

# つかいかた
### ①取り込みます
<blockquote><font color="#cc0099">！</font><font color="maroon">『貯蔵庫:tablePlus.nako3』</font><font color="#cc0000">を</font><font color="#cc0099">取り込む</font>。</blockquote>

　[省略記法](https://nadesi.com/v3/doc/index.php?%E6%96%87%E6%B3%95%2F%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E5%8F%96%E8%BE%BC&show#hd9529db9)が便利すぎる🎶

### ②普通にテーブル作成します
<blockquote><font color="black">テストテーブル</font><font color="#cc0099">＝</font><font color="maroon">「名前,ふりがな,点数<br>太郎,たろう,55<br>花子,はなこ,100<br>一郎,いちろう,80」</font><font color="#cc0000">の</font><font color="#660099">テーブル作成</font>。</blockquote>

### ③テーブル拡張設定

<blockquote><font color="black">テストテーブル</font><font color="#cc0000">に</font><font color="black">テーブル拡張設定</font>。</blockquote>

　こんだけ！

　
```
！『貯蔵庫:tablePlus.nako3』を取り込む。
テストテーブル＝「名前,ふりがな,点数
太郎,たろう,55
花子,はなこ,100
一郎,いちろう,80」のテーブル作成。
テストテーブルにテーブル拡張設定。
```
　👇コピペして試してね。
 
 https://n3s.nadesi.com/index.php?action=edit&page=new

## オプション
　デフォルトは全部入りです。
<blockquote><font color="black">テーブル拡張オプション</font><font color="#cc0099">＝</font><font color="#cc0099">{</font><br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"選択行色"</font><font color="#cc0099">:</font><font color="maroon">"#CCCCFF"</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"編集"</font><font color="#cc0099">:</font><font color="#660099">オン</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"行選択"</font><font color="#cc0099">:</font><font color="#660099">オン</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"自動ソート"</font><font color="#cc0099">:</font><font color="#660099">オン</font>,<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="maroon">"セル幅変更"</font><font color="#cc0099">:</font><font color="#660099">オン</font><br><font color="#cc0099">}</font></blockquote>

　テーブル拡張設定命令の**前**に、テーブル拡張オプションを設定することで、選択して機能を付けたり、行選択の選択行色を変更することができます。

## 拡張命令
　テーブル拡張設定していないと使えない命令です。

### ●(テーブルに)テーブル行追加
　テーブルの末尾に全て空セルの行を、一行追加します。
　「編集」で使います。
 　（空の行を追加するというのは編集以外ではあまり必要ないと思って、
  セル高さの設定が行われないです）
 
### ●(テーブルの)テーブルアイテム取得
　編集や自動ソートで変更されたテーブルのデータを取得します。

### ●(テーブルの)テーブル背景色取得
　テーブルの背景色配列を取得します。
 　DOM部品オプションのテーブル背景色と同じ形式なのでDOM部品オプションに設定を戻すのにも使えます。

## その他の命令
　テーブル拡張設定していない通常のテーブルにも使えます✨

### ●(テーブルの行列を色に)セル文字色変更
　テーブル部品、DOM部品オプションで背景色の設定は出来るけど、文字色の設定は出来ないんだよね。
　thの文字色は白色だけど、背景色を薄い色合いにしたい可能性は無いのかい？　というわけで作ってみた。

### ●(テーブルの行列を色に)セル背景色変更
　セルに自由に色を付けたい要望は結構v1のグリッドでも繰り返しあったので作ってみました。

　しかーし！
　これがまた自動ソートすると、データは動いてもセルの位置は変わらないので、データと色がずれちゃうよね😭
　そのうち自動ソートの方法を見直したい。

### ●(テーブルから行列の)テーブルセル取得
　[行,列]を指定して、td要素が取得できます。
### ●(テーブルから行の)テーブル行取得
　列を指定してtr要素が取得できます。

# おわります
　今年もギリでなんとか間に合い、今年もアドベントカレンダー、全て埋めることが出来ました。
　なんと今回は参加者10人と過去最高の記録でした！
　本当にありがとうございました✨