javascriptでボタンを押すたびに複数行の追加されていく処理について - <tableid="table01"><tr><td... - Yahoo!知恵袋
こんな感じでしょうかねぇ。 まず複製する部分をtbodyでまとめてから、cloneNodeでコピーする。 name属性の後ろの数字はtbodyの数をカウントして得る。 （複製するたびに増えるのでグローバル変数を使わなくて済む） 最後にtableにappendChildする。 ボタンはtheadに置くことで対処しました。 <script type="text/javascript"> function cloneFunc(){ var table01 = document.getElementById("table01"); var tbody = table01.getElementsByTagName("TBODY"); var cnt = tbody.length; var copy = tbody[0].cloneNode( true ); var inp = copy.getEle
JavaScriptでボタンをクリックする度に、テーブルの行、列が1行ずつ追加されていくようにするにはどうしたらいいでしょうか？…
JavaScriptでボタンをクリックする度に、テーブルの行、列が1行ずつ追加されていくようにするにはどうしたらいいでしょうか？ちなみにこのような事が書いてあるJavaScriptの本もお薦め頂けたら嬉しいです。しかし本は必須ではありません。
JavaScriptを使ってフォーム項目の表示/非表示を切り替えるスクリプト
こんなことありませんか？ フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか？ そんな時、押した項目によってその後の内容を変化させれば 項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。 JavaScriptはかなりの初心者なので忘れないようメモしてみました。 【サンプル】例えばお申し込みフォームで… ・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。 ・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力してください。 会員番号 会員番号を入力してください。 特典:初めての方は30%オフ！ サンプルソース(ラジオボタン) HTML <form> <table border="0" cellspacing="0" cellpad
JavaScriptでフォームテーブルを動的に拡張する方法 - abe-tatsuya.com
ユーザー入力を受けるフォームにおいて、動的に行を追加する方法を紹介します。JavaScriptでinsertRowとinsertCellを使い、テーブルの行を自由に増やせるようにするための実践的なコード例を解説します。 ユーザー側から任意の複数行のデータをフォームから受け取る場合に、入力フォームのテーブルの行を、ボタンクリックで動的に追加していく処理というのは、結構使えるんじゃないかなと思います。 例えば、以下のようなテーブルがある場合。 <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="
HTML要素を動的に追加・削除する
要素を追加する 基本的なながれとしては以下のようになります。 1) 要素を追加したいオブジェクト（親オブジェクト）への参照を取得。 ID名で取得（確実） 親オブジェクト = document.getElementByID("ID名"); タグ名（TABLEとかTDとか）で取得。numは０から始まる順番 document.getElementsByTagName("タグ名").item(num); 2) 追加したい要素を生成。 オブジェクト名 = document.createElement("タグ名"); 3)生成した要素の属性をセット オブジェクト名.setAtrribute("属性","値"); 4)生成した要素を親オブジェクトへ追加 親オブジェクト.appendChild(オブジェクト名); ボタンをクリックした際にJavaScriptを実行するような属性を付けたい場合がありますが、
JavaScript サンプル
JavaScript を使って動的に入力フォームの個数を変化させるサンプル。 JavaScript を有効にしてください...
クリックでHTMLを操作してフォームを追加したい
えーと、ループ番号ってのがどういうものかわかりませんが 思いっきり手をぬいてグローバルにカウンタをもたせてみました 本来なら最後の番号を見ながらそれにインクリメントするのが 正しい気はします。 （例によって挿入の都合上div_submitをクラスからidに変更しています） <script> var num=1; function addrow(obj){ var n=obj.parentNode.parentNode.firstChild; var flg=true; while(n){ if(n.nodeName=="DIV"){flg=false; break;} n=n.nextSibling; } if(flg) return false; var row=n.cloneNode(true); var n=row.firstChild; var flg=false; while(n
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
flipsnap.jsというのを書いた - Webtech Walker
最近タッチデバイスでスワイプしてスライドするようなUIを書く機会が多いので汎用的に使えるようにしてみた。 DEMO pxgrid/js-flipsnap - GitHub iScrollでもsnapっていう機能使うと同じようなことができるんだけど、iScrollでこれをやろうとするとこのスクロールが効いてるところはネイティブの縦スクロールが効かなくなるという問題があって、それを解決しようと思って最初はiScrollの内部をいじってたんだけど、ちょっとiScrollベースだとどうしても無理なところがあったのでこの機能だけ切り出してみたというわけ。 一応Androidでも動いてるっぽい。 iScrollみたいに多機能じゃないけどまあこれだけ使いたいっていうこと結構あるので割といいんじゃないかと。TODOはとりあえずドキュメント。 追記（2012/02/04）：クロスブラウザに対応しました。
flickGal - jQueryプラグイン | stakamura
$(function(){ $(".yourElement").flickGal(); }); iPhoneでフリックギャラリーを実装するプラグインを作ってみました。 Androidの友達が「多分動いてる」と言っていました。PCでもそこそこ動きます。 iPhoneのtouchEventなどに関して、nogunoguさんの記事を大変参考にさせていただきました。というか完全にnogunoguさんの研究のおかげです。感謝でございます。 デモ こちらをご覧ください。→ view demo ※iPhone向けのページです。Androidでも動くらしいです。PCでもそこそこ動きます。 確認環境： iPhone3G v4.2.1 Safari, iPad v4.2.1 Safari ダウンロード コミットの仕方なんか変かも知れません。 ダウンロード (GitHub) 圧縮版はだいたい3KBくらいです
JavaScript/リンク/セレクトボックスでリンクする（選択のみ） - TAG index
フォームのセレクトボックスでリンクするスクリプトです。（選択のみでジャンプするタイプ） フレームにも対応しています。 <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- // 設定開始 // （フレームの場合は、表示先のフレーム名を設定してください） // （top を指定すると、フレームの分割を廃止して画面全体で表示します） // （blank を指定すると、新規ウィンドウで表示します） var target = ""; // 設定終了 function jump(){ var url = document.form1.select.options[document.form1.select.selectedIndex].value; if(url != "" ){ if(t
iView Slider
画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサムネイルをアニメーションで表示できるjQueryのスライダーで、イメージスライダー、コンテンツスライダー、バナー広告、プレゼンテーションなどさまざまな用途で利用できます。 IE6/7/8/9, Firefox, Chrome, Safari, Operaなど、主要ブラウザを全てサポート。 iOS, Androidのスマートフォンもサポート。 サイズは変更可能で、レスポンシブレイアウトに対応。 フレ
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
お天気アイコンサービス:ご利用方法 自由に貼り付け（パソコンサイト用標準サービス）/HTMLへの記述
HTMLへの記述(各予報表示共通) ホームページ内に天気予報を表示するためには、HTMLファイル内に、 天気予報データ取得のためのJavaScript文 天気予報表示のためのJavaScript文 を記述する必要があります。 天気予報読み込みのためのJavaScript文内にはユーザーIDや天気予報種類、予報地域を示す番号を記入します。 天気予報データ取得のためのJavaScript文 次の青色と赤色のJavaScript文をHTMLファイル内に記述してください。 ブラウザがこの部分を読み込むと、お天気アイコンサーバーから天気予報データを取得します。 <script type="text/javascript"> Wid="XXXXXXX"; Wtype="TTTTTT"; Wplc="PPPP"; </script> <script type="text/javascript" SRC=
天気情報の表示
RC-NET WEB SERVICES のダウンロードから各地のお天気情報(XML)を取得表示するモジュールを入手できる。 これは，ブログ用なので通常のページにはそのままの状態では利用不可。 そこで，通常ページにも表示できるように考えてみた。 モジュールをダウンロード（livedoor天気情報！）し解凍。解凍して出来たimgフォルダー内のindex.htmlを削除。 weather というフォルダーを作成し，上記imgフォルダーと ソース(weather_icon_replace.phpに書き換える) をweather内入れる。 次に MagpieRSS をインストールする必要がある。 magpierss-0.72.tar.gzをダウンロードし解凍して，incファイル（4つ）すべてとextlibフォルダをHTMLファイルと同じディレクトリにUPする。 しかし，日本語は文字化けをするようなの
jQueryでシンプルにマウスオーバー時に画像をスライドさせる
マウスオーバーでちょっとエフェクトをかけたい。 でも、jQueryプラグインを使うほどの機能はいらないということがあるかと思います。 今回はプラグインを使用せず、シンプルにマウスオーバー時に画像をスライドさせたいと思います。 via：Useful image hover slide effect with jQuery | image hover,image slide sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 またマウスオーバーで変化を与えたい画像を下記のように記述します。 <div id="id名"> <a href="#"><img src="画像パス" /></a> </div> なお、画像はエフェクト分を含めた形で作成します。 このため、最初はオーバー画像を隠すようにCSSを書きます。 #id名 { width:296px; heigh
動画をサイトに埋め込む際に便利な、オープンソースのFlashVideoPlayer「NonverBlaster」
動画と言えば最近はYoutubeにアップしたり、ニコ動やその他動画サイトにアップして見ることが多いと思いますが、 サイトに直接設置することも可能です。その際に便利なのが「NonverBlaster」です。 デモページ 以下からデモページに行けます。いろいろ並んでますが、ようはいろいろ設定できるよ的な感じかと思います。 デモページ Youtubeも読み込めたりするんですが、他にもmp3やmp4やmovなども使えます。 ダウンロード ダウンロードは以下のページのDownload the Playerというところから。 Nonverbla › Graphic & Interface Designer › Blog › NonverBlaster:hover – Free and OpenSource Flash Video Player for the Web 使い方 主に使うファイルは以下の2
スクロールで順に画像読み込みLazy Load Plugin for jQuery
Mon, Jan 1, 0001 Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader ut
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Lecture: コンテンツ内を開閉してくれるアコーディオンメニュー ［JS］
BOS138 - Bandar Game Gacor Asia Mode Spin BarBar Ala Big BOS