《CSSデザイン》見出しメイカー　初心者学習用ツール（α版）

/* ///////////////////////////////////////////////////////////////////////////////////
html上のテーブルデータをローカルストレージに保存する関数

最近自分でもよく使うので、外部関数化して公開します。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■　《セーブ機能》
■　SaveTableData(tblid,thline);
■　該当のテーブルIDのデータ（値と背景色）をローカルストレージに記録します。
■
■　（引数1）tblid:セーブするテーブルのID
■　（引数2）thline：セーブの対象外とするデータ行数
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■　《ロード機能》
■　LoadTableData(tblid,thline,confirm);
■　該当のテーブルIDのデータ（値と背景色）をローカルストレージから読み込み、テーブルに表示します。
■　
■　（引数1）tblid:ロードするテーブルのID
■　（引数2）thline：ロードの対象外とするデータ行数（見出し除外用）
■　（引数3）confirm：1:ロード時の確認メッセージ有り　未設定：無し
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■　《セーブデータ消去機能》
■　clearTableData();
■　該当のhtmlに関するローカルストレージを消去し、ページをリロードします。
■　
■　（引数）なし
■　
■■■■■■■■　jsファイルの取り込み方法 ■■■■■■■■■■■■
■　　　ローカル環境/自分のweb環境に取り込む
■　　　本ファイルをダウンロードするなり、コピーするなりして.jsファイルを作成して使ってください。
■　　　htmlと同じ階層に配置するのであればhtmlファイルに以下を記載すれば関数が使用できます。
■　　　　　　<script src="./tblsavelord.js"></script>
■　　　設置階層が違う場合は適宜パスを変更して下さい。
■
■　
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■　《その他注意事項》
■　
■　・ダウンロードした場合、本ファイルの内容は自由に改変してもらって構いません。
■　・本ファイルの利用によって被った被害等に関しては責任を負いかねますので、承知の上で利用下さい。
■　
////////////////////////////////////////////////////////////////////////////////////////*/

function createTableKey(tableId) {
    return "table_" + tableId;
  }
  
  function SaveTableData(tableId, thline) {
    var table = document.getElementById(tableId);
    var rows = table.rows.length; // データ数（見出し含む）
    var row_start = thline; // 見出し行数
    var data = [];
  
    for (var i = row_start; i < rows; i++) {
      var row = table.rows[i];
      var cols = row.cells.length;
      var rowData = [];
  
      for (var j = 0; j < cols; j++) {
        var cellText = row.cells[j].textContent.trim();
        var bgColor = row.cells[j].style.backgroundColor; // 背景色情報を取得
        var num = Number(cellText);
        rowData.push({
          value: Number.isNaN(num) ? cellText : num,
          bgColor: bgColor // 背景色情報を追加
        });
      }
      data.push(rowData);
    }
    var key = createTableKey(tableId);
    try {
      localStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      console.error("Failed to save data to local storage: " + e);
    }
    console.log("セーブしました:" + key);
  }
  
  function LoadTableData(tblid, thline, confirm) {
    var key = createTableKey(tblid);
    console.log("ロードしました:" + key);
  
    var data = JSON.parse(localStorage.getItem(key));
    if (!data) {
      console.error("No data found in local storage for key: " + key);
      return;
    }
    if (confirm == 1 && !window.confirm("本当にロードしていいですか？")) {
      return;
    }
    var table = document.getElementById(tblid);
    var rowCount = table.rows.length;
    for (var i = rowCount - 1; i >= thline; i--) {
      table.deleteRow(i);
    }
    for (var i = 0; i < data.length; i++) {
      var row = table.insertRow(-1);
      for (var j = 0; j < data[0].length; j++) {
        var cell = row.insertCell(-1);
        cell.innerHTML = data[i][j].value;
        cell.style.backgroundColor = data[i][j].bgColor; // 背景色情報をセット
      }
    }
  }
      
function clearTableData() {
    var res = confirm("本当にテーブルデータの削除を行いますか？");
    if (res == true) {
        localStorage.clear();
        location.reload();
    }
}