アラフィフおやじログ

前回 はHandsonTableで色々と実験してみて色々と宿題が残ってました。 その改良を色々と試みてきたわけですがなかなかうまくいかない・・・。 宿題の解決についてはひとまずはできたものもあります。 まだまだ先は長いなぁ。EXCELがいかに偉大かが身にしみました。 それと 質問サイト のご回答のおかげで何とかここまでこぎつけたこと非常に感謝します。 やはり英語やプログラムの地力が不足していることを痛感させられます。 頑張らねば。 ◆残課題リスト 　・検索にヒットしたレコードのみをレコード表示する。 　・検索条件クリアしたらそのデータを再表示する。 　・検索ヘッダー領域を固定する。   　→何とか今回実現、最後の検索ヘッダーがサイズ依存なので少しあれですが 　・着色した色データを保存する。 　・列の枠サイズを取得して保存する。 　・行のサイズを取得して保存する。   　→取りあえず値を取得するところまでは何とかできた。後はこれをどうやって 　　  JSON化してうまくローカルストレージに保存するか。んでどうやって 　　 呼出し時に効率的に反映するか。 　・コメントの内容を取得して保存する。 　　→色々と調べてみたけれどもメソッド自体が動かないのでどうしようもない。 ●HTML ＜!DOCTYPE html＞ ＜html＞ ＜head＞ ＜title＞Handsontable - サンプル＜/title＞ ＜script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"＞＜/script＞ ＜script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.29.1/handsontable.full.min.js"＞＜/script＞ ＜script src="sample06.js"＞＜/script＞ ＜link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontabl...

とりあえず HandsonTable とかいうJQUERYのライブラリがあるらしいんで 色々とやってみました。最終的にはEXCELチックにしたかったんですが 色の保存と枠の保存が未実装、さらにフィルタとかも不十分な状態ながら ひとまずサンプルの成果ということで、コードは相変わらずへぼちんです。 色々なサンプルを参照させていただいてここまでこぎつけました。 先人の方々ありがとうございます。 HTML部分 ＜!DOCTYPE html＞ ＜html＞ ＜head＞ ＜title＞Handsontable - サンプル＜/title＞ ＜script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"＞＜/script＞ ＜script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.29.1/handsontable.full.min.js"＞＜/script＞ ＜script src="sample05.js"＞＜/script＞ ＜link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.29.1/handsontable.full.min.css"＞ ＜/head＞ ＜body＞ ＜a id ="header"＞ ＜div class="header_area"＞ ＜div class="header_block"＞ ＜div class="header_box"＞ ＜h1＞HandsontableDemoPage＜/h1＞ ＜input id="delData" type="button" value="ローカルストレージ内データ削除"＞ ＜p＞ ＜input id=...

前回 に残課題となっていた1～3について何とか形になった。 3年ほど前にJavaScript+ACCESSで簡易ツール作ってたけど その時よりもシンプルな作りにできました。(CSSが結構すごい) 後KintoneからJSONデータ取るときにむっちゃ複雑なパースしてたけど オブジェクトで取って整形すれば比較的楽になることを学びました。 まだまだへっぽこですな。 ひとまずソースというか、いい加減Git使わないとなぁ ・HTML ＜!DOCTYPE html＞ ＜html＞ ＜head＞ ＜title＞localStorageのサンプル2＜/title＞ ＜script src="http://code.jquery.com/jquery-2.0.0.min.js"＞＜/script＞ ＜script src="test3.js"＞＜/script＞ ＜link rel="stylesheet" href="test3.css" type="text/css"＞ ＜/head＞ ＜body＞ ＜div id="form"＞ ＜input id="clearButton" type="button" value="全投稿削除"＞ ＜input id="resetButton" type="button" value="編集内容クリア"＞ ＜ul＞ ＜li class="name"＞ ＜input type="hidden" name="key" value="" ＞ ＜label for = "name"＞名前＜/label＞ ＜input id="formName" type="text" size="20" maxlength="20"...