javaScriptで編集可能なtableからリアルタイムに値を取得したい

Question

前提・実現したいこと

javaScriptで編集可能なtableからリアルタイムに値を取得したいです。
下記のサイトではjQueryで実現されてるのですが、知識が乏しいために活用できませんでした。
http://kachibito.net/snippets/contenteditable-table-and-live-bar-chart
グラフにしたいわけではなく単に値だけ取得できれば幸いです。

発生している問題・エラーメッセージ

テーブルの編集は可能だが入力値が反映されない。

Comments

[miyabi_pudding]

今質問者さんが書いてる段で構いませんので、自身のコードを質問本文に記載お願いします。

[m.ts10806]

今どういうコードを書いたか分からないですが、自身である程度手に負える範囲から攻めていかないことには何も身に付かないと思います。

[yambejp]

まずは「編集可能なtable」の定義をするところからでしょう

Answer 1

こんな感じで監視するといいでしょう

<style>
td{width:100px;height:100px;text-align:center;}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const view=document.querySelector('#view');
  const tbl=document.querySelector('#tbl');
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      view.textContent=tbl.textContent;
    });    
  });
  const config = { attributes: true, childList: true, characterData: true };
  document.querySelectorAll('[contenteditable]').forEach(x=>{
    observer.observe(x, config);
    observer.observe(x.firstChild, config);
    [...x.childNodes].forEach(y=>{
      observer.observe(y, config);
    });
  });
});
</script>
<table border id="tbl">
<tbody>
<tr>
<td contenteditable>1</td>
<td contenteditable>2</td>
<td contenteditable>3</td>
</tr>
<tr>
<td contenteditable>4</td>
<td contenteditable>5</td>
<td contenteditable>6</td>
</tr>
<tr>
<td contenteditable>7</td>
<td contenteditable>8</td>
<td contenteditable>9</td>
</tr>
</tbody>
</table>
<div id="view"></div>

Comments

[whiteman]

初心者で性格が横着なので既存のサイトのソースをいじって実現できないかと試行錯誤しています。
なので恥ずかしくて、お見せできるようなコードではないと躊躇してしまいました。
yambejpさんのコードを参考にやってみます。回答いただいた皆さんありがとうございました。

[yambejp]

私の書き方だと微妙に反応しないノードがあります
どこまで調整が必要か検討してみてください