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

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2002/12/17 16:29:22
  • 終了:--

回答(2件)

id:chintara No.1

chintara回答回数13ベストアンサー獲得回数02002/12/19 12:29:56

ポイント30pt

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

注意

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

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

id:watal

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

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

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

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

2002/12/19 12:48:20
id:chintara No.2

chintara回答回数13ベストアンサー獲得回数02002/12/20 21:01:22

ポイント40pt

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>

id:watal

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

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

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

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

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

【ご参考にしたい皆様】

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

-------

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

2002/12/24 15:33:02

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません