ボタンクリックでテーブルに行を追加する JavaScript | JavaScript | 阿部辰也のブログ――人生はひまつぶし。
ユーザー側から任意の複数行のデータをフォームから受け取る場合に、入力フォームのテーブルの行を、ボタンクリックで動的に追加していく処理というのは、結構使えるんじゃないかなと思います。 例えば、以下のようなテーブルがある場合。 <table border="1" cellspacing="0" cellpadding="4" id="table1"> <tr> <th>名前</th> <th>住所</th> <th>TEL</th> </tr><tr> <td class="name"><input type="text" name="name" value="" size="10" maxlength="20" /></td> <td class="address"><input type="text" name="address" value="" size="10" maxlength=
Javascriptでtableタグに行、列の追加や削除を行う | ScrapEngineer
Javascriptで行うテーブル操作を一通りまとめました。 行列の操作やセルの取得方法などなど、サンプルコードもあります。 テーブルの要素を取得 // IDからテーブルを取得 var table = document.getElementById("table_id"); こちらはテーブルの要素を取得できればいいので自分の好みidから取得してます。 行数取得 var table = document.getElementById("table_id"); var rows = table.rows.length; // 行数 行追加 var table = document.getElementById("table_id"); // -1で末尾に追加。インデックスで指定の位置に追加も可能 var rows = table.insertRow(-1); ※行の追加だけ行うとtrタグのみの
[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js
デモのアニメーションGIF ここでは「Esc」キーを拡大画像から元画像に戻す際に使用していますが、スクロールしてコンテンツに戻る時のアニメーションも非常に軽快です。 Zoom.jsの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシート、jquery.jsを外部ファイルとして記述します。 アニメーションのエフェクトはBootstrapのtransition.jsに依存しており、Bootstrapのjsファイルかtransition.jsを記述します。 <head> ... <link rel="stylesheet" type="text/css" href="css/zoom.css"> </head> <body> ... コンテンツ ... <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/j
![[JS]ちょっとしたアイデアの積み重ねが素晴らしい！画像を拡大表示するシンプルなスクリプト -Zoom.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/d408ea9798d5866f690b92bcfb70e29e4a50a739/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015051309.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
