人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

株式の銘柄ポートフォリオ作成のときなど、ユーザによって複数(数は任意)のモノの名前を積み上げて一覧表示させていって、最終的にCGIなどにその名前を一括してPOSTで送信するようなWebページのインターフェイスを考えています。できるだけページ遷移させたくないので、クライアントサイドで(JavaScriptなどで)ユーザに一つずつ名前を入力させてそれを一覧表示させるようなデザインが欲しいのですが、何か良い例となるようなサイト、スクリプト集などはありませんか。Applet、Flashは避けたいです。

●質問者: watal
●カテゴリ:コンピュータ 経済・金融・保険
✍キーワード:Applet CGI Flash JavaScript Web
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● chintara
●30ポイント

http://www.users.gr.jp/ml/archive/dhtml/2607.asp

的外れでしたらすみません。

注意

・addInp関数の1行目と2行目は改行なしでつなぎます。

・delInp関数は、少なくとも私の使用しているIE6(SP1)では動作しませんでした。

◎質問者からの返答

ありがとうございます!挙動はイメージに近い感じです。そういえば、この「はてな」の回答ウインドウも増やしたり減らしたりできますよね。

私のIE6(SP1)ではdelIhpでテキストボックスが消えましたが、指摘のとおり下にボタンが残ったままになりました。そのへんはなんとかできそうですが…。

追加元はテキストボックスでよいのですが、テキストボックスは一つで、そこに入力した内容を一覧としてどんどん表に貼り込める(行を追加できる)感じのデザインも探しています。

商用サイトでもっとDHTML等をぎゅんぎゅん回したCoool!な感じのデザイン例があったらさらにご紹介お願いいたします。


2 ● chintara
●40ポイント

http://homepage2.nifty.com/godakaz/laboratory/22.html?1

[ サンプル ] _ 入力行の追加(テーブルごと)

商用サイトを探してみたのですが、見つかりませんでした。代わりにといってはなんですが、それらしいコードを簡単に作成してみました。

IE限定ですが、参考にしていただければ幸いです。

<script>

function addRow(strValue) {

var myRow = document.all.myTable.insertRow();

var my1stCell = myRow.insertCell();

my1stCell.width = 150;

my1stCell.insertAdjacentText(’BeforeEnd’, strValue);

var my2ndCell = myRow.insertCell();

my2ndCell.insertAdjacentHTML(’BeforeEnd’, ’<input type=”hidden” name=”myValue” value=”’ + strValue + ’”><input type=”button” value=”削除” onclick=”deleteRow(¥’’ + strValue + ’¥’);”>’);

}

function deleteRow(strValue) {

with (document.all.myTable) {

for (var i = 0; i < rows.length; i++) {

if (rows(i).cells(0).innerText == strValue) {

deleteRow(i);

return;

}

}

}

}

function deleteAllRow() {

with (document.all.myTable) {

while (rows.length > 0) {

deleteRow(0);

}

}

}

</script>

<form name=”myForm”>

<p>

<input type=”text” name=”myText”>

<input type=”button” value=”追加” onclick=”addRow(document.myForm.myText.value);”>

<input type=”button” value=”全削除” onclick=”deleteAllRow();”>

<input type=”submit” value=”送信”>

</p>

<table id=”myTable” border=”1”></table>

</form>

◎質問者からの返答

あああっ、なるほど。こういうのを待ってました!

ひとつひとつ「削除」まで付けて頂いて感謝です!

残念なのはIE限定というところでしょうか。IE依存なのはどの部分でしょうか?

これと同じようなものをクロスブラウザで実装できませんかね?(ネスケ用に制御を振分けてもいいですから…)

後で高ポイント振らせていただきます!ありがとうございました!

【ご参考にしたい皆様】

いただいだソースはコピペすると一部に全角”や’などが入っていましたので適宜半角に変換してください。

-------

OKです。ありがとうございました。後はセンスでなんとか仕上げます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ