タグ

ブックマーク / mae.chab.in (2)

  • JavaScript / jQueryでtableの行を「追加」「削除」「移動」「変更」させる方法

    まず「リスト選択」の列の選択肢から「B」を選択します。 ⇒「リスト名」が「B」に変更されます。(変更)「追加/削除」の列の「+」ボタンを押します。 ⇒行が追加されます。(追加)追加された行の「リスト順」の列の「↑」をクリックします。 ⇒行が上へ移動します。(移動)移動した行の「リスト順」の列の「↓」をクリックします。 ⇒行が下へ移動します。(移動)最後に、好きな行の「追加/削除」の列の「-」ボタンを押します。 ⇒行が削除されます。(削除) いかがでしょうか。まあ、よくある機能ですね。では、この機能の実装方法について以下にまとめておきたいと思います。 HTMLHTMLでは、以下の点がポイントとなります。 それぞれの機能を発生させるためのイベントハンドラをセットしておきます。操作の対象となる「行」の部分は<tbody>タグ内に記述するようにします(これが後々大事になります)。JavaScrip

    JavaScript / jQueryでtableの行を「追加」「削除」「移動」「変更」させる方法
  • コマンド一発でReactの開発環境を構築してくれるFacebook製ツール「create-react-app」

    Reactの開発環境構築Reactの開発環境を構築することは当ブログでも以下の通り記事をアップしていますが、使う必要のあるツールがたくさんあり慣れてないとかなり大変です。 Reactを「webpack + babel-loader」でビルドする方法 – maesblogReactをnpmでビルドする方法 browserify (watchify) + babelify編 – maesblogざっとReactの開発に必要なものを挙げてみても、これだけあります。もちろんこれら以外にもまだあります。挙げたらキリがないくらいです。 これらのツールをReactプロジェクトの度にインストールして、設定してとやるのは骨が折れます。ちょっとしたReactのコンポーネントを作って試したいという時も同様です。 今回紹介するcreate-react-appを使うと、これらのReact開発の度に発生する面倒な作

    コマンド一発でReactの開発環境を構築してくれるFacebook製ツール「create-react-app」
  • 1