javascriptでリンクを動的に変更する方法

前へ 次へ
このQ&Aのポイント
  • javascriptでリンクを動的に変更する方法についてご説明します。
  • 追加ボタンを押すと、検索部分のリンクも動的に追加されるようにしたいです。
  • サンプルコードを使用して具体的な実装方法を説明します。
回答を見る
  • ベストアンサー

javascript でリンクを動的に変更する方法

下記のようなシステムを作成をしようと思っています。 javascript がまだあまり理解していない為ご教授いただければ幸いです。 質問としては追加ボタンで動的に追加した際に検索部分のリンクも一緒に動的に追加したいと考えています。 下記のリンクの「この部分」にも追加するごとにiの値が入るようにしたいと考えています。 <a href="#" onClick="window.open('store1.php?from=js&amp;no=「この部分」','search_store1','width=540,height=540')">検索</a> 宜しくお願い致します。 サンプルコード <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script language="JavaScript"> <!-- var i = 1; var maxrows = 10; function hage() { i++; // Tbody への参照を取得します var mybody=document.getElementById("histTablebody"); mystore_row=document.createElement("TR"); mystore_row.setAttribute("id","histrow"+i); mystore_cell=document.createElement("TD"); mystore_cell.setAttribute("id","num"); currenttext=document.createTextNode(i); mystore_cell.appendChild(currenttext); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); currenttext=document.createTextNode("店舗ID"); mystore_cell.appendChild(currenttext); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); mystore_form.setAttribute("type","TEXT"); mystore_form.setAttribute("name","store_id" + i); mystore_form.setAttribute("value",""); mystore_form.setAttribute("id", "storecell"); mystore_cell.appendChild(mystore_form); mystore_form=document.createElement("INPUT"); mystore_form.setAttribute("type","TEXT"); mystore_form.setAttribute("name","store_name" + i); mystore_form.setAttribute("value",""); mystore_form.setAttribute("id", "storecell"); mystore_cell.appendChild(mystore_form); mystore_row.appendChild(mystore_cell); mystore_cell=document.createElement("TD"); //mystore_cell=document.createElement("a"); mystore_row.appendChild(mystore_cell); mybody.appendChild(mystore_row); document.register.delrow.disabled=false; if(i>=maxrows){ document.register.addrow.disabled=true; } } var hige = function() { var mytable=document.getElementById("histTablebody"); var removeTable=document.getElementById("histrow"+i); mytable.removeChild(removeTable); i--; if(i==1){ document.register.delrow.disabled=true; } // 追加ボタンを有効にする document.register.addrow.disabled=false; } var result = function() { alert(''); } //--> </script> </head> <body> <form name="register"> <div id="hist"> <table border="1"> <tbody id="histTablebody"> <tr id="histrow1"> <td id="num">1</td> <td>店舗ID</td> <td><input type="text" name="store_id1" id="storecell"><input type="text" name="store_name1" id="storecell"></td> <td> [<a href="#" onClick="window.open('store1.php?from=js&amp;no=[]','search_store1','width=540,height=540')">検索</a>] </td> </tr> </tbody> </table> </div> <table> <tr> <td> <input type="button" id=addrow value="行を追加" onClick="hage();"> </td> <td> <input type="button" id=delrow value="行を削除" onClick="hige();" disabled="true"> </td> <td> <input type="button" value="登録" onClick="result()"> </td> </tr> </table> </form> </body> </html>

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

#1です。 さっき、気が付いたのですが、たいして違わないけれどこっちのほうが面倒なことをしなくてすむので簡単かも… （簡略化のためtrのidを復活してます。勿論無くても可能） <script language="JavaScript"> <!-- var maxrows = 10; //最大行数 function hoge(flag){ 　var tbody = document.getElementById("histTablebody"), 　　　tr = tbody.getElementsByTagName("tr"), 　　　n = tr.length + (flag?1:-1), 　　　i, input, a; //1行追加 　if(flag){ 　　tr = tr[0].cloneNode(true); 　　tr.setAttribute("id", "histrow" + n); 　　tbody.appendChild(tr); 　　tr.cells[0].innerHTML = n; 　　input = tr.getElementsByTagName("input"); 　　for(i=0; i<2; i++){ 　　　input[i].value = ""; 　　　input[i].setAttribute("name", "store"+ ["id","name"][i] + n); 　　} 　} else { //1行削除 　　tbody.removeChild(tr[n]); 　} //ボタンの有効/無効処理 　document.getElementById("addrow").disabled = n>=maxrows; 　document.getElementById("delrow").disabled = n<2; } var result = function() { alert(''); } function w_open(evt){ 　var t = evt.target || evt.srcElement; 　if(t.nodeName != "A" || t.innerHTML != "検索") return; 　var n = t.parentNode.parentNode.id.replace("histrow",""); 　var url = "store1.php?from=js&amp;no=[" + n + "]"; 　window.open(url, "search_store1", "width=540,height=540"); } //--> </script> </head> <body> <form name="register"> <div id="hist"> <table border="1" onclick="w_open(event)"> <tbody id="histTablebody"> <tr id="histrow1"> <td>1</td> <td>店舗ID</td> <td><input type="text" name="store_id1"> <input type="text" name="store_name1"></td> <td>[<a href="#">検索</a>]</td> </tr> </tbody> </table> </div> <table> <tr> <td> <input type="button" id="addrow" value="行を追加" onclick="hoge(true);"> </td> <td> <input type="button" id="delrow" value="行を削除" onclick="hoge();" disabled="true"> </td> <td> <input type="button" value="登録" onclick="result()"> </td> </tr> </table> </form> </body>

mochikey
質問者

お礼

ありがとうございます。本当に感謝しております。 下記の用に変更をして無事に解決することができました。 PHPで配列として取得したいので「name="store_id[]"」に変更をしてみました。 //1行追加 　if(flag){ 　　tr = tr[0].cloneNode(true); 　　tr.setAttribute("id", "histrow" + n); 　　tbody.appendChild(tr); 　　tr.cells[0].innerHTML = n; 　　input = tr.getElementsByTagName("input"); 　　for(i=0; i<2; i++){ 　　　input[i].value = ""; 　　　//input[i].setAttribute("name", "store"+ ["id","name"][i] + n); input[i].setAttribute("name", "store"+ ["_id","_name"][i] + "[]"); input[i].setAttribute("id", "sto"+ ["_id","_name"][i] + n); 　　} <!-- html箇所 --> <tbody id="histTablebody"> <tr id="histrow1"> <td>1</td> <td>店舗ID</td> <td><input type="text" name="store_id[]" class="store_id1" value="<?php echo $_GET['store_id'] ?>" size=16 maxlength=10> <input type="text" name="store_name1[]" class="store_name1" value="<?php echo $store['store_name'] ?>" size=32>&nbsp;[<a href="#">検索</a>]</td> </tr> </tbody> もう一点だけ質問が有るのですがよろしいでしょうか。 「name="store_id[]"」にした為、上記が親ウインドウだとすると子ウインドウ下記なのですが、 うまく取得できなくなってしまいました。 「input[i].setAttribute("id", "sto"+ ["_id","_name"][i] + n);」 を追加をしてIDで値を取得することは可能でしょうか？ ＜子ウインドウ＞ [<a href="#" onClick="window.opener.parent.content.document.register.store_id<?php echo $number ?>.value='<?php echo $store['store_id'] ?>'; window.opener.parent.content.document.register.store_name<?php echo $number ?>.value='<?php echo $store['store_name'] ?>'; window.close()">登録画面にコピー</a>]

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

＞「この部分」 最初の例示では、no=「この部分」になっているけれど、ソースの方を見るとno=[]となっているので、どちらが正なのだろうか？ また、ソースでno=[1]になってないけれど、最初に記述してあるリンクだけはno=[]が正解？ 一方、ご提示のスクリプトでは、同じidの要素をつくりまくってしまうように見えるけれど、本来idは一意のはず。 他の部分が分からないけど、idは無くてもいけそうなのでいらないidは勝手に削除して、かなり曲解してこんなのでは？ idが必要なら、定義し直せばいいので、適当に修正してください。 （hage()とhige()はまとめてhoge()にしちゃっています） （全角空白は半角に） <script language="JavaScript"> <!-- var maxrows = 10; //最大行数 function hoge(flag){ 　var tbody = document.getElementById("histTablebody"), 　　　tr = tbody.getElementsByTagName("tr"), 　　　n = tr.length + (flag?1:-1), 　　　i, input; //1行追加 　if(flag){ 　　tr = tr[0].cloneNode(true); 　　tbody.appendChild(tr); 　　tr.cells[0].innerHTML = n; 　　input = tr.getElementsByTagName("input"); 　　for(i=0; i<2; i++){ 　　　input[i].value = ""; 　　　input[i].setAttribute("name", "store_"+ ["id","name"][i] + n); 　　} 　　tr.cells[3].getElementsByTagName("a")[0].onclick = (function(k){ 　　　return function(){ w_open(k); }; 　　})(n); 　} else { //1行削除 　　tbody.removeChild(tr[n]); 　} //ボタンの有効/無効処理 　document.getElementById("addrow").disabled = n>=maxrows; 　document.getElementById("delrow").disabled = n<2; } var result = function() { alert(''); } function w_open(n){ 　var url = "store1.php?from=js&amp;no=[" + n + "]"; 　window.open(url, "search_store1", "width=540,height=540"); } //--> </script> </head> <body> <form name="register"> <div id="hist"> <table border="1"> <tbody id="histTablebody"> <tr> <td>1</td> <td>店舗ID</td> <td><input type="text" name="store_id1"> <input type="text" name="store_name1"></td> <td>[<a href="#" onclick="w_open(1);">検索</a>]</td> </tr> </tbody> </table> </div> <table> <tr> <td> <input type="button" id="addrow" value="行を追加" onclick="hoge(true);"> </td> <td> <input type="button" id="delrow" value="行を削除" onclick="hoge();" disabled="true"> </td> <td> <input type="button" value="登録" onclick="result()"> </td> </tr> </table> </form> </body>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 動的に作成したテキストボックスの値をaspへ

    いつもお世話になっております。 javaスクリプトで動的にテキストボックスを作成し、 実行ボタンを押すと値をhiddenでtest.aspへ渡すことは可能でしょうか？ 不可能であれば。。。。 test.aspへ値を渡す良い方法がありましたら、ご教示くださますようお願いいたします。 環境：ＩＩＳ7.5　クラッシックＡＳＰ 以下、ソースを参照してください。。。 ＊自宅では環境がないため、 印刷を見ながら手で入力しました。 確認して投稿しましたが。。。打ち間違い等あったらご指摘くださいませ＞＜ --------以下ソース抜粋　addtext.asp ------------------- <script language="JavaScript"> <!-- function addDev(){ var targetName; var idObj; var tbObj; var devBlockCnt; idObj = document.getElementById("histTablebody"); tdObj = idObj.getElementsByTagName("tbody"); devBlockCnt++; targetName = "devBlock" + devBlockCnt; var mybody = document.getElementById("histTablebody"); tbcurrent_row = document.createElement("TBODY"); tbcurrent_row.setAttribute("id",targetNam); mycurrent_row=document.createElement("TR"); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); mycurrent_cell=document.createElement("TD"); mycurrent_row.appendChild(mycurrent_cell); tbcurrent_row.appendChild(mycurrent_row); mycurrent_row=document.createElement("TR"); mycurrent_row.setAttribute("id",histrow1); mycurrent_cell=document.createElement("TD"); mycurrent_form=document.createElement("INPUT"); mycurrent_form.setAttribute("type","TEXT"); mycurrent_form.setAttribute("name","devEntry1"); mycurrent_form.setAttribute("id","devEntry1"); mycurrent_form.setAttribute("value",""); mycurrent_cell.appendChild(mycurrent_form); mycurrent_row.appendChild(mycurrent_cell); tbcurrent_row.appendChild(mycurrent_row); mybody.appendChild(tbcurrent_row); } //--> </script> <html> <head> <title>TEST</title> </head> <body> <div align="center"> <table border="1"> <tr> <td align="left" valign="middle">入力1</td> <td> <form name="fmDev"> <div> <table border="0" id="histTablebody"> <tbody id="devBlock1"> <tr><td></td></tr> <tr id="histrow1"> <td><input type="text" name="devEntry1" id="devEntry1"> </td> </tr> </tbody> </table> </div> <table> <tr><td><input type="button" id=addDevid value="追加" onClick="addDev();"> </td> </tr> </table> </form> </td> </tr> <form name="fmHoki"> <tr> <td align="left" valign="middle">入力2</td> <td align="left"><textarea row="5" name="hokiTXT" cols="60"></textarea></td> </tr> </form> </table> </div> <teble border="0"> <tr> <form action="test.asp" method="post" name="fm2"> <tr><input type="submit" value="登録実行" alt=""></td> 　　　 <input trype="hidden" name="hokiTXT"> </form> <form name="fm3"> <td><input type="button" value="戻る" onclick="location.href='menu01.asp';"></td> </form> </tr> </teble> </body> </html> <SCRIPT LANGUAGE="vbscript"> '--------------------------------------- ' test.asp へ行く前の処理 '--------------------------------------- Sub fm2_OnClick() Dim i Document.fm2.hokiTXT.value = Document.fmHoki.hokiTXT.value 　'--ここで動的に作成したテキストボックスの値をtest.aspへ渡す処理が 　'わかりません。。。。。 　'debug確認用　↓ for i=0 to document.fmDev.length msgbox document.fmDev.element(i).name,,"test" msgbox document.fmDev.element(i).value,,"test" next End Sub </SCRIPT>

  • javascript マウスイベント

    動的に生成したテーブルのマウスイベントについてご質問します。 var body = document.getElementsByTagName("body")[0]; var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); for (var j = 0; j < 20; j++) { var row = document.createElement("tr"); for (var i = 0; i < 1; i++) { var cell = document.createElement("td"); var cellText = document.createTextNode("cell is row "+j+", column "+i); cell.id="dt1"; cell.height="15" cell.appendChild(cellText); row.appendChild(cell); } tblBody.appendChild(row); } tbl.id="tbl1"; tbl.width="200" tbl.appendChild(tblBody); body.appendChild(tbl); 上記のようなソースでテーブルを作成しています。 tbl.onmousedown このあたりだと思うのですが、記述方法がわからず困っています。 具体的には下記のような動きを目指してます。 http://www.programming-magic.com/20071215024226/ 初歩的な質問かもしれませんが、ご教授頂けると幸いです。

  • 記述方法について

    よろしくお願いします。前回こちらで教えて頂いたソースを 基に表示するテーブルの並び方を変えたいと思っています。 理想の並び方は、例として くま さる　　　　　　　　　　　くま　　さる ごりら　　これらを→ごりら　うま　 うま　　　　　　　　　　　りす りす というように読み込んだエクセルのレコードを2列ずつにして表したいのですが、可能でしょうか？ 以下のソースを基に、色々試したのですが、ブラウザ上には何も出てきません。 -------------------------------------------------------------- <html> <head> <title>TEST CSV IN</title> <script type="text/javascript"> function hoge(){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("border","1"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; while (!rs.EOF){ var tbl = document.createElement("table"); table.setAttribute("border","1"); var td = document.createElement("td"); for(var i=1; i<2; i++){ 　　var tr = document.createElement("tr"); 　　trs[0] = document.createElement("tr"); 　　trs[1] = document.createElement("tr"); 　　trs[2] = document.createElement("tr"); tds[0] = document.createElement("td"); tds[1] = document.createElement("td"); tds[2] = document.createElement("td"); var img = document.createElement("img"); img.setAttribute("src",rs.fields(0)); img.setAttribute("alt",""); tds[0].appendChild(img); tds[1].innerText = rs.fields(1); tds[2].innerText = rs.fields(2); trs[0].appendChild(tds[0]); trs[1].appendChild(tds[1]); trs[2].appendChild(tds[2]); tr.appendChild(trs[0]); tr.appendChild(trs[1]); tr.appendChild(trs[2]); tbody.appendChild(tr); } rs.MoveNext; } table.appendChild(tbody); output.appendChild(table); } </script> </head> <body onload="hoge();"> CSV DATA IMPORT Ver MINO <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="cn.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> <div id="OUTPUT"> </div> </body> </html> ------------------------------------------------------------- javascriptを始めたばかりなので、まだよく理解していないので 大変申し訳ありませんが、ご指導願えればと思います。 よろしくお願いします。

  • javascriptでカレンダーを作る方法

    下に書いてあるjavascriptを書き換えて、一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1～30まで一マスごとに数字を入れられ、sun・5・12・19・26は赤文字で書かれ、1より前のマスや30以降のマスは空欄のカレンダーを作るにはどうすればいいでしょうか？ <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<4;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); var txt=i*7+j+1; td.appendChild(document.createTextNode(txt)); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>

  • javascriptで作成されたテーブルの値を取得したい

    javascriptで作成されたテーブルの値を取得したいです。 具体的には、最初に作成するテーブルの大きさを入力するフォームがあり、 ボタンを押すと、そこに入力された値によってテーブルが作成され、 さらに、そこにデータを入力して、また次のボタンを押せば テーブルに入力された値を取得できるようにしたいです。 最初のテーブルの大きさを入力するフォームと、テーブルを作成することはできたのですが、そこから入力された値を取得する方法が分からず、困っています。 そのプログラムはこんな感じです。 分かる方いらっしゃいましたら、お知恵をお貸しください。 よろしくお願いします。 <html> <head> <title>テスト</title> </head> <body> <form name="myForm"> <p>mac.itemを半角数字で入力してください</p> mac <input type="text" size="10" name="myFormKK"> item <input type="text" size="10" name="myFormI"> <input type="button" value="ＯＫ" onclick="addAll()"> </form> <br> <p>処理量　段取り時間　段取り費　梯状在庫保管費を入力</p> <form name="fpsck" method="post" enctype="text/plain" action=""> <TABLE BORDER="1" id="Table2"> </TABLE> </form> <script type="text/javascript"> //３行目以降　開始 <!-- function　add3rd(){ var tbl = document.getElementById("Table2").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table2"); } kk = eval(document.myForm.myFormKK.value)-1; it = eval(document.myForm.myFormI.value)-1; for(j=0;j<=it;j++){ var tr = document.createElement("tr"); for(i=0;i<=kk*3+6;i++){ var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","8"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","psck"); if(i == 0){ itN = j + 1; itName = "item" +itN; tx1.setAttribute("value",itName); tx1.setAttribute("disabled","disabled"); } else{ tx1.setAttribute("value","0"); } td1.appendChild(tx1); tr.appendChild(td1); } tbl.appendChild(tr); }} //３行目以降　終了 // --> </script> <script type="text/javascript"> //すべての関数実行 <!-- function addAll(){ add3rd(); } // --> </script> </body> </html>

  • Javascript初心者です助言おねがいします。

    オセロを作成しています。 盤面の上にaからhも文字を表示して盤面の左に１から８の文字を表示させたいのですが、どうもうまくいきません。どうすればよいでしょうか。 Javascript // ボードの上に a から h までの文字を表示する const letters = document.createElement("div"); letters.classList.add("letters"); for (let i = 0; i < 8; i++) { const letter = document.createElement("div"); letter.classList.add("letter"); letter.textContent = String.fromCharCode(97 + i); letters.appendChild(letter); } // ボードの左に 1 から 8 までの数字を表示する const numbers = document.createElement("div"); numbers.classList.add("numbers"); for (let i = 1; i <= 8; i++) { const number = document.createElement("div"); number.classList.add("number"); number.textContent = i; numbers.appendChild(number); } board.appendChild(numbers); // 盤面を作成 for (let row = 0; row < 8; row++) { for (let col = 0; col < 8; col++) { const cell = document.createElement("div"); cell.classList.add("cell"); cell.setAttribute("data-row", row); cell.setAttribute("data-col", col); board.appendChild(cell); cells[`${row}-${col}`] = cell; } board.appendChild(letters); } css .letters { display: flex; justify-content: space-between; margin-bottom: 8px; } .letter { width: 12.5%; text-align: center; } .numbers { display: flex; flex-direction: column; justify-content: space-between; margin-right: 8px; } .number { height: 12.5%; text-align: center; }

  • POSTすると配列の数がおかしくなる

    matとquaとhowtoをそれぞれ4つPOSTしているのですが、POSTされたデータを受け取るとmat4つ、qua5つ、howto5つと数がおかしくなります。 なぜかわかりません。とくにインクリメントしていないのに増えます。 教えて下さい。 <script type="text/javascript"> function myAdd(obj){ var max=15; var c=count("mat"); if(c>=max) return false; var oTR=document.createElement("tr"); var names=["mat","qua"]; for(var i in names){ var oTD = document.createElement("td"); var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", names[i] + (c+1).toString()); oTD.appendChild(oTag); oTR.appendChild(oTD); } document.getElementById("t0").getElementsByTagName("tbody")[0].appendChild(oTR); if(c>=max-1) obj.disabled=true; } function count(name){ var tags=document.getElementsByTagName("input"); var ta=document.getElementsByTagName("textarea"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); if(tags){ for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } } if(ta){ for(var i=0;i<ta.length;i++){ if(ta[i].name.match(reg)){ c++; } } } return c; } function myTextAreaAdd(obj){ var max=15; var c=count("howto"); if(c>=max) return false; var oTag = document.createElement("textarea"); oTag.setAttribute("name", "howto" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); if(c>=max-1) obj.disabled=true; } </script> </head> <body> <form method="post" enctype="multipart/form-data" action="check.php"> <textarea name="explain"></textarea> <table id="t0" border> <tbody> <tr> <td><input type="text" name="mat1" /></td> <td><input type="text" name="qua1" /></td> </tr> <tr> <td><input type="text" name="mat2" /></td> <td><input type="text" name="qua2" /></td> </tr> <tr> <td><input type="text" name="mat3" /></td> <td><input type="text" name="qua3" /></td> </tr> <tr> <td><input type="text" name="mat4" /></td> <td><input type="text" name="qua4" /></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd(this)"> <br /> <span id="area"> <textarea name="howto1"></textarea> <textarea name="howto2"></textarea> <textarea name="howto3"></textarea> <textarea name="howto4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd(this)"> <input type="submit" value="送る"> </form>

  • テーブルにおける行(セルにプルダウン含む）の追加方法

    追加ボタンを押度に，テーブルに１行ずつ追加されるプログラムを組んでいるのですが，追加ボタンを押しても何も起こりません．1行には，テキストボックスとプルダウンメニューの２つのセルが含まれます．テキストボックスのみであれば，追加に成功します． プルダウンのメニュー項目の追加方法ではなく，プルダウン自体を複製して追加していきたいのですが，参考サイトが見つかりませんでした．また，各行を識別する為一意の名前をつけたいのですが，どう記述したらよろしいでしょうか． お手数おかけしますが，下記ソースのどこが間違っているのか，どう処理すべきなのかを，ご教示頂けますでしょうか．お願い致します． <BODY> <TABLE id="Table1"> <TR> <td class="cellWhite"><input type="text" value="単語入力" onFocus="cText(this)" onBlur="sText(this)" style="color:#999"></td> <td bgcolor="#5096C9" width="113px"> <select name="column"> <option value="00">赤</option> <option value="01">青</option> <option value="02">黄</option> </select></td></tr></TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <script language="JavaScript"> function addRow() { 　var tbl = document.getElementById("Table1").firstChild; 　if (!tbl.tagName) { 　　　tbl = document.getElementById("Table1");} 　var tr = document.createElement("tr"); 　var td1 = document.createElement("td"); 　td1.setAttribute("class","cellWhite"); 　var tx1 = document.createElement("input"); 　tx1.setAttribute("type","text"); 　tx1.setAttribute("value","単語入力"); 　tx1.setAttribute("onFocus","cText(this)"); 　tx1.setAttribute("onBlur","sText(this)"); 　tx1.setAttribute("style","color:#999"); 　td1.appendChild(tx1); 　var td2 = document.createElement("td"); 　var selectName="column";//selectの名前 　var options={0:"赤",1:"青",2:"黄"}; 　var c=sel.firstChild; 　while(c){ 　　if(c.name==selectName) sel.removeChild(c); 　　　　c=c.nextSibling;} 　　var e=document.createElement("select"); 　　e.setAttribute("name",selectName); 　　for(var i in options){ 　　　　var o=document.createElement("option"); 　　　　o.setAttribute("value",options[i]); 　　　　o.appendChild(document.createTextNode(options[i])); 　　　　e.appendChild(o);} 　　sel.appendChild(e); 　　tr.appendChild(td1);tr.appendChild(td2);tbl.appendChild(tr);}</script> 参考にしたサイトです： http://oshiete1.watch.impress.co.jp/qa4074195.html http://okwave.jp/qa299889.html

  • javascriptで困っています。教えてください

    JavaScriptで配列をPOST送信しようとしています。 <form>や<input>を作っておいてではなく、javascriptで生成する関数からしたいと思っています。以下のコードでうまくいきません。 教えていただければありがたいです。よろしくお願いします。 <!DOCTYPE html> <html> <head> <script type="text/javascript"> var ar = new Array(5); ar[0] = 111; ar[1] = 222; ar[2] = 333; ar[3] = 444; ar[4] = 555; function sampleForm(value){ var form = document.createElement('form'); document.body.appendChild( form ); var input = document.createElement('input'); input.setAttribute('type','hidden'); input.setAttribute('name','hidden_input'); input.setAttribute('value', value); form.appendChild(input); form.setAttribute('action','send.php'); form.setAttribute('method','post'); form.submit(); } </script> </head> <body> <a href=“javascript:sampleForm(ar)”>クリックしたら“samplepost”をPOST送信</a> </body> </html> send.php-------------------------------- <?php $num = isset($_POST['hidden_input']) ? $_POST['hidden_input'] : null; print "num: " . $num; ?>

  • insertRowメソッド内で計算式を書く方法

    http://jsajax.com/Articles/TableInsertRow/157を参考に、[行を挿入]ボタンをクリックすると最終行の下に行が追加され、その中にテキストボックスを配置し計算を行うようにしたいと思い、下記のソースを記述しました。 そして追加した行で正常に計算を行うために、insertRow内のinnerHTMLのgoods_a_3の3の部分を動的に設定したり、calc内の計算式を動的にループさせる必要があると思ったのですが、どのように記述すれば良いか分からなかったため、アドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <script type="text/javascript"> <!-- window.onload = function() { document.getElementById("btnInsert").onclick = insertRow; } function insertRow() { var tbl = document.getElementById("Table1"); var row = tbl.insertRow(2); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = "<input type=\"text\" name=\"goods_a_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />*"; cell2.innerHTML = "<input type=\"text\" name=\"goods_b_3\" size=\"3\" value=\"0\" onchange=\"calc();\" />="; cell3.innerHTML = "<input type=\"text\" name=\"ans3\" size=\"8\" value=\"0\" disabled=\"disabled\" />"; } function calc(){ document.form1.ans1.value = document.form1.goods_a_1.value * document.form1.goods_b_1.value; document.form1.ans2.value = document.form1.goods_a_2.value * document.form1.goods_b_2.value; } // --> </script> </head> <body> <form action="#" name="form1" id="form1"> <table id="Table1" border="1"> <tr> <td><input type="text" name="goods_a_1" size="3" value="0" onchange="calc();" />*</td> <td><input type="text" name="goods_b_1" size="3" value="0" onchange="calc();" />=</td> <td><input type="text" name="ans1" size="8" value="0" disabled="disabled" /></td> </tr> <tr> <td><input type="text" name="goods_a_2" size="3" value="0" onchange="calc();" />*</td> <td><input type="text" name="goods_b_2" size="3" value="0" onchange="calc();" />=</td> <td><input type="text" name="ans2" size="8" value="0" disabled="disabled" /></td> </tr> </table> </form> <br /> <input id="btnInsert" type="button" value="行を挿入" /> 以上、よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する