なでしこさんにグリッドが欲しい❗️　前編　～編集したい！～

# 発端
　なでしこ１のGUI部品には、配列やCSVデータを表形式で表示して閲覧、編集のできる「グリッド」という部品があります。
　最近掲示板に、なでしこ３にグリッドはないのでしょうかという質問がありました。
　なでしこ３にはtable要素を利用した「テーブル」という部品があり、同様に配列やCSVデータを表形式で表示して閲覧できるのですが、編集は出来ません。

　ただし、元はテーブルの内容を書き換えようと思ったら、一旦部品を削除して新しいデータで再度テーブルを作るか、自前で書き換えのプログラムを実装するかしかなかったのですが、「**[テーブル更新](https://www.nadesi.com/v3/doc/index.php?plugin_browser%2F%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E6%9B%B4%E6%96%B0&show)**」と「**[テーブルセル変更](https://www.nadesi.com/v3/doc/index.php?plugin_browser%2F%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%82%BB%E3%83%AB%E5%A4%89%E6%9B%B4&show)**」の命令が追加されてとても使いやすくなりました！

　でも、ワタクシの考えではグリッドにはまだ必要な機能が４つあります。

# なでしこ１のグリッド
![v1グリッド.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/b6339fdd-7b90-3f54-e5ab-acaa9901c071.jpeg)

### 行選択
　「行選択」をオンにすると、グリッド上をクリックした時、セル毎ではなく一行が選択状態になり色が変わります。

### セル幅の変更
　ヘッダ部分をドラッグすることで、ユーザーが自由にセル幅を変更できます。

### 自動ソート
　「自動ソート」をオンにすると、ヘッダ部分をクリックした時、その列で表ソートします。
　クリックする度に昇順と降順が入れ替わります。元には戻せません。

### 編集
　「編集」をオンにすると、各セルの内容を直接ユーザーが編集出来るようになります。この設定は行選択より優先します。

　ワタクシ個人的に、テーブルには無い一番重要な機能がこの編集だと思います。

# 外部のライブラリに頼る？
　ちょっと検索すると、グリッドっぽいものは色々見つかりました。
　その中でもちょっと良さそうかな？　と思ったのがこの二つ。

https://gridjs.io/

https://bossanova.uk/jspreadsheet/v4/


　使い方が簡単そうでMITライセンス（JspreadsheetはCE版）。
　
## gridjsは編集機能が無かった
　うん、ダメじゃん😅
　グリッド部品似のシンプルな見た目で自動ソートに加えてサーチとページング機能が付加できるのでスゴく良さそうだと思ったんですけどね。
　サーチやソートで見た目が変化した時のデータや、サーチで引っかかったのが元データの何行目かといった情報が無いっぽいので、無理矢理系で編集できるようにするのもなかなか面倒くさそう。

　⬇️自動ソートもセル幅の変更も標準装備。簡単なイベント記述で行選択も付けられました。

https://n3s.nadesi.com/id.php?2896

## JspreadsheetはCSSがツライ
　こちらはグリッドっていうよりエクセルっぽい見た目でかっこよく、ちゃんと編集機能もあります。
　なんか色々高機能そうなのですが、まにゅあるが英語だからよくわかんにゃい。
　何より自前のHTMLでなら問題ないのですが、貯蔵庫エディタで動かそうとするとCSSが敗北して見た目が崩壊するのねん😢（ちなみに崩壊する原因を作った責任の一端はワタクシにありますのです🙏💦）

　⬇️雑にボーダーや背景色に関わる設定がある部分を抜き出し、IDを付与して貼っ付けて見た目を整えてます💧

https://n3s.nadesi.com/id.php?2899

　貯蔵庫のCSSは絶賛改良中のようなので、いずれうまく出来るようになると良いですね✨
　こういった外部ライブラリが利用しやすくなると、なでしこさんで出来ることの幅というか拡張性というかが大きく広がる気がします。

# contenteditableを知る‼️
　ユーザーによる要素の編集を可能にできる`contenteditable`という属性があるらしい。にゃんと！！！

https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/contenteditable

　なんだ、テーブルのtd要素全部にこれ付けてやれば、フツーに編集可能に出来るようになるんじゃないですか？！
　やってみます。

# テーブルに編集機能を追加
　ここからはテーブル部品に機能を追加して、どれだけｖ１のグリッドに近づけるかやってみたいと思います。

## contenteditable属性を付ける
　一瞬、tableタグにcontenteditable属性を付ければ中身全部編集できるようになるんじゃないの？　と思ったのですが、全部編集できるようになったことはなったのですが、ヘッダも編集できちゃう上フォーカスがテーブル自体に入ってしまうのでよろしくない。

　td要素を地道に全て反復して、全てのセルにcontenteditableを付けていくことにします。
　contenteditableは論理属性ではなく列挙型属性なのでtrueかfalseを設定しなければならず、オン(1)などではいけません。true以外では有効にならないけど、オフにする時はcontenteditableを消すか、キチンとfalseを設定せよということラシイ。
　DOM属性設定では出来るのに、どうもオブジェクトプロパティ構文で直接代入しようとしたら出来ないと思っていたら、HTML上は`contenteditable`で良いのだが、正しいプロパティ名は`contentEditable`だった。むじゅい💧

<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>。<br><br><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><font color="black">全セル</font><font color="#cc0000">を</font><font color="#cc0099">反復</font><font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">contentEditable</font><font color="#cc0099">＝</font><font color="#660099">true</font>。<font color="#009900">#&nbsp;編集可能にする</font></blockquote>

　なんと、たったこれだけで全てのセルが編集出来るようになり、タブでフォーカスを移動して行くことが出来るようになりました‼️

## 編集内容の反映
　これで編集は出来るようになりましたが、まだ見た目上のことだけで、どこかに保存されている訳ではありません。
　編集内容が反映されたデータを取得できるようにする必要があります。
　とりあえず、編集内容を元データに反映してみることにします。
　編集されたセルの行番号と列番号が分かれば、その内容を元データの同じ場所に代入してやればいいだけ！

 　先ほどはcsv形式のテキストを直接指定してテーブル作成しましたが、CSV取得して二次元配列のデータを作り、これを書き換えて行くことにします。

<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><br><font color="black">テストテーブル</font><font color="#cc0099">＝</font><font color="black">テストデータ</font><font color="#cc0000">の</font><font color="#660099">テーブル作成</font>。</blockquote>

### セルの行番号と列番号を取得する。
　列番号は、セルの`cellIndex`です。
　行番号は、セルの親要素 tr (`parentNode`)の`rowIndex`になります。

<blockquote><font color="black">テストテーブル</font><font color="#cc0000">を</font><font color="#660099">クリックした時</font><font color="#cc0000">には</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;<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;</font><font color="maroon">「行:{対象のセル行番号},列:{対象のセル列番号}」</font><font color="#cc0000">を</font><font color="#660099">表示</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>。</blockquote>

　こちらはテーブルのイベント一つで出来ました。
　テーブルのイベントでも、対象にはセル(td)が入ります。
　ただし、ピンポイントで外枠のボーダーをクリックしたらテーブルになってしまいindexがundefinedになってしまうので、nodeNameを確認しています。

　セルの行列が分かればこっちのもの。

<blockquote><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="#cc0099">対象</font><font color="#cc0000">の</font><font color="#660099">テキスト取得</font>。</blockquote>

　こんな感じ？
　セルがフォーカスを失ったタイミングで反映させるようにすればいいかな？
　問答無用で反映させるのがいいのか、フォーカスが入った時と出た時のテキストを比較して、編集されてた時だけ反映させるようにした方がいいのか・・・🤔

## どのテキストを取得するのか
　と、その前にぶち当たった大きな命題。
### テキスト取得（innerHTML）
　編集された内容を実際にテキスト取得して確認してみたところ、追記、または一部を書き換えた場合は問題ないのですが、全部消してから入力した場合、改行はしていないのに何故か`<br>`がくっついちゃうことが分かりました。

```
# 太郎を消さずに桃を追加した場合
桃太郎

# 一旦セルの内容を全て消して、桃太郎を入力した場合。
桃太郎<br>
```

　そもそもセルを空にするとセルの内容は空ではなく`<br>`になるっぽい。
　そして、その後文字入力しても`<br>`はそのまま残るもよう。

　また、途中に改行を入れて入力した場合には、

```
/* 途中で改行した場合
太
郎
*/
<div>太</div><div>郎</div>
```

　ぎゃー、ナニコレ💦
　一行ごとdivタグで括られることになっているようです。
　なんにしろ、HTMLタグがくっついて来てしまう。
　ワタクシ「HTML取得」は`innerHTML`で、「テキスト取得」は`innerText`なのかと思っていたけど違ったっぽい。
　確認するとテキスト取得は、inputやテキストエリアの場合は入力値(Value)を返すようになっていて、その他の要素はHTML取得同様innerHTMLが返るようになっているっぽい。
　なでしこ１には「タグ削除」というHTMLタグを全て消しちゃう命令があったけど、なでしこ３には・・・無さそう？

### innerText
　いや、最初から自分でinnerTextを取得すれば良いんですよね？

<blockquote><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="#cc0099">対象</font><font color="#cc0099">.</font><font color="black">innerText</font>。</blockquote>

　・・・と思ったんですけど、空にした時`<BR>`のかわりに改行コード(`\n`)が入ってしまう。

```
# 一旦セルの内容を全て消して、桃太郎を入力した場合。
桃太郎　　//改行コード(/n)がある
　　　　　//空行ができる
```
　邪魔くさい💧

### textContent
　っていうのもある。
　`innerText`が、『ノードとその子孫の「レンダリングされている」テキスト内容』であるのに対し、`textContent`は『ノードおよびその子孫のテキストの内容』とのこと。
　こちらは改行コードが入りません。

```
# 一旦セルの内容を全て消して、桃太郎を入力した場合。
桃太郎
```
　改行しても反映されません。テキストそのものだけが取得されるということのようです。
```
/* 途中で改行した場合
太
郎
*/
太郎
```

### ブラウザによっても違う⁉️
　色々うだうだ書いてきましたが、これはFirefoxでのことでした。
　Chromeでは、セルを空にしてから文字入力しても`<br>`や改行コードがくっついてくるという現象は起こらず、どれもスッキリ同じ結果になりました。なんだって～！？！？
　では、まとめてみましょう。

**※セルを空にして文字入力した場合**
```
# Chromeの場合
innerHTML:桃太郎
innerText:桃太郎
textContent:桃太郎

# Firefoxの場合
innerHTML:桃太郎<br>
innerText:桃太郎　　//改行コード(\n)がある

textContent:桃太郎
```
　Chromeは全部同じ結果となりますが、Firefoxはそれぞれ違う結果となりました。
　ちなみに、空にした場合はChromeもFirefox同様`<br>`や改行コードが入っているのですが、その後文字入力した時に余分なものは消えるということのようです。

**※途中で改行した場合**
```
# Chromeの場合
innerHTML:太<br>郎
innerText:太
郎
textContent:太郎

# Firefoxの場合
innerHTML:<div>太</div><div>郎</div>
innerText:太
郎
textContent:太郎
```
　差違があるのはinnerHTMLだけですが、Chromeは普通に`<br>`が入るだけなのに対し、Firefoxではそれぞれが`<div>`要素に入るコトになっているようです。
　Safariのことは分かりません。
　もしよろしければお試しして発表して下さいね。

https://n3s.nadesi.com/id.php?2915

　ところで、改行の入った編集内容を二次元配列データに反映させたとして、そのデータで再びテーブルを作ったり、テーブル更新したりしたらどうなるのかな？　と思いやってみた所、innerHTMLのタグが反映されることはなく、フツーにタグごとテキストとして表示されました。

![テーブルテスト.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/5c1fdf5c-1c45-921f-5a52-d61980cd8125.jpeg)

　ダメダメですね。
　innerTextの場合は、テーブル上で改行が反映されることはもちろんないのですが、改行コード自体は存在しているので表CSV変換などした時に、めんどーなことになるようです。いちおう、もう一度CSV取得すればテーブルに戻すのはだいじょぶなんですが。

![CSVテーブルテスト.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561177/ec078590-9b8b-c7b8-babb-caaedb30a921.jpeg)

　とりあえず改行入力は禁止にした方が良さそうですね。
　v1のグリッドも改行は入れられません。
　そしてどっちにしろ空にしたら改行が入ってしまうので、**textContent**を取得するのが良さそう。という結論にとりあえず達しました。

## 改行入力禁止
　と、いうわけで、Enterのイベントを停止して改行を入れられないようにしちゃいます。
 
<blockquote><font color="black">テストテーブル</font><font color="#cc0000">の</font><font color="#660099">キー押した時</font><font color="#cc0000">には</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">もし</font>、<font color="#660099">押されたキー</font><font color="#cc0099">＝</font><font color="maroon">「Enter」</font><font color="#cc0000">ならば</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#660099">対象イベント</font><font color="#cc0000">の</font><font color="#660099">DOMイベント処理停止</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">ここまで</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>

　これでOKかと思いきや、コピペではフツーに改行も入っちゃう～。
　textContentだからデータには入らないんですが、見た目的に？
　フォーカスが外れる時に、セルにもtextContentを設定しちゃう？

## テーブル数値右寄せ
　「DOM部品オプション」には「テーブル数値右寄せ」という項目があり、trueになっていると内容が数値のセルは右寄せが設定されます。デフォルトは`true`です。

👉[**なでしこ3 マニュアル > plugin_browser/DOM部品オプション**](https://www.nadesi.com/v3/doc/index.php?plugin_browser%2FDOM%E9%83%A8%E5%93%81%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3&show)

　編集後のテキストが数値かどうかを判定して、行揃えを変更する必要がありそうです。
　「数字か判定」と「数列か判定」がありますが、すべてが数値かどうか判定出来るのは「数列か判定」です。

👉[**なでしこ3 マニュアル > plugin_system/数列判定**](https://www.nadesi.com/v3/doc/index.php?plugin_system%2F%E6%95%B0%E5%88%97%E5%88%A4%E5%AE%9A&show)

<blockquote><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;<font color="black">テキスト</font><font color="#cc0000">を</font><font color="#660099">数列か判定</font>。<br>&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;<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;<font color="#cc0099">違えば</font>、<br>&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;<font color="#cc0099">ここまで</font>。<br><font color="#cc0099">ここまで</font>。</blockquote>

　簡単にできる予定でしたが、`DOM部品オプション.テーブル数値右寄せ`が`undefined`になってしまい悩みました。
　どうやらキーが「漢字＋ひらがな」ひらがなで終わっているとうまくいかず、「」で括る必要があるようです。
　「行揃え」もそうですね。ついでに「text-align」のような「-」が入ったヤツも括らないとエラーなるようです（？）
　っていうか直接代入しようとすると「右」や「左」が使えないから、DOMスタイル設定のが早かったｗ

:::note info
[v3.6.38](https://github.com/kujirahand/nadesiko3/releases/tag/3.6.38) にて「行揃え」が直接指定出来るようになり、「右」「左」が使えるようになりました！

また、CSSでは「text-align」ですがJSでは「textAlign」と記述することになっていて、JS記法なら直接指定出来、CSS記法もカッコで括れば指定出来ます。

```
テスト＝「div」のDOM部品作成。
テストに「なでしこ」をテキスト設定。

# できる
テスト.行揃え＝「右」
テスト.style.textAlign=「right」
テスト.style.「text-align」=「right」
```

:::

# とりあえずできました

　こんな感じ？

<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="maroon">「元データ：」</font><font color="#cc0000">を</font><font color="#660099">表示</font>。<br><font color="black">テストデータ</font><font color="#cc0000">を</font><font color="#660099">JSONエンコード</font><font color="#cc0000">して</font><font color="#660099">表示</font>。<br><br><font color="#009900">#&nbsp;セルの設定</font><br><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><font color="black">全セル</font><font color="#cc0000">を</font><font color="#cc0099">反復</font><font color="#cc0099">:<br>&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="#cc0099">対象</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="#cc0099">対象</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="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><br><font color="#009900">#&nbsp;セル内の改行入力を禁止する。</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="#cc0099">もし</font>、<font color="#660099">押されたキー</font><font color="#cc0099">＝</font><font color="maroon">「Enter」</font><font color="#cc0000">ならば</font>、<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#660099">対象イベント</font><font color="#cc0000">の</font><font color="#660099">DOMイベント処理停止</font>。<br>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#cc0099">ここまで</font>。<br><font color="#cc0099">ここまで</font>。<br><br><font color="#009900">#&nbsp;セルの行列番号を取得</font><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><font color="#009900">#&nbsp;編集後データの表示</font><br><font color="maroon">「編集後のデータを取得」</font><font color="#cc0000">の</font><font color="#660099">ボタン作成</font>。<br><font color="#cc0099">それ</font><font color="#cc0000">を</font><font color="#660099">クリックした時</font><font color="#cc0000">には</font>、<font color="#cc0099">:<br>　　</font><font color="maroon">「編集後データ：」</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">JSONエンコード</font><font color="#cc0000">して</font><font color="#660099">表示</font>。</blockquote>

　できました！
　編集出来るテーブルのサンプルです👇

https://n3s.nadesi.com/id.php?2917

　セルの内容を書き換えて編集後のデータを取得したら、ちゃんとデータの内容が編集したとおりに変わっているのが確認できます✨

# つづきます
　ユキノはcontenteditableのじゅもんをおぼえた！
 
　予想以上にどのテキストを取得するのかの研究に、時間と行数と精神点を消費してしまったので、っていうかアドベントカレンダー書くことなくてピンチなので、他の機能は次回に持ち越します😅

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