• ベストアンサー
  • すぐに回答を!

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

追加ボタンを押度に,テーブルに1行ずつ追加されるプログラムを組んでいるのですが,追加ボタンを押しても何も起こりません.1行には,テキストボックスとプルダウンメニューの2つのセルが含まれます.テキストボックスのみであれば,追加に成功します. プルダウンのメニュー項目の追加方法ではなく,プルダウン自体を複製して追加していきたいのですが,参考サイトが見つかりませんでした.また,各行を識別する為一意の名前をつけたいのですが,どう記述したらよろしいでしょうか. お手数おかけしますが,下記ソースのどこが間違っているのか,どう処理すべきなのかを,ご教示頂けますでしょうか.お願い致します. <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

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数1460
  • ありがとう数2

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

  • ベストアンサー
  • 回答No.2
  • yuu_x
  • ベストアンサー率52% (106/202)

参考までに。 <script type="text/javascript"> /*@cc_on@*/ function addEvent(e, t, f){ e./*@if(1) attachEvent('on' + @else@*/ addEventListener(/*@end@*/ t, f, false); } function addRow(trigger){ var table = trigger.ownerDocument.getElementById('Table1'); // 最初の行こぴー var row = table.rows[0].cloneNode(true); // 名前は好きなように。 row.id = 'ROW.' + table.rows.length; // 最初のインプット要素 input = row.getElementsByTagName('INPUT')[0]; // イベント追加 addEvent(input, 'focus', cText); addEvent(input, 'blur', cText); // 最初のセレクト要素 select = row.getElementsByTagName('SELECT')[0]; select.name = 'column.' + table.rows.length; // 最初の tbody に行追加(HTML4.01 の場合 tbody 必須) table.tBodies[0].appendChild(row); } function cText(evt){ var obj = evt.target || evt.srcElement; // ... } </script> </head> <body> <div> <table id="Table1"> <tbody> <tr> <td class="cellWhite"> <input type="text" value="単語入力" style="color:#999"> </td> <td bgcolor="#5096C9" width="113"> <select name="column"> <option value="00">赤</option> <option value="01">青</option> <option value="02">黄</option> </select> </td> </tr> </tbody> </table> <input type="button" value="行追加" onclick="addRow(this)"> </div> </body>

共感・感謝の気持ちを伝えよう!

質問者からのお礼

本当にありがとうございました!cloneNodeの使用方法が大変よくわかりました.ありがとうございます.

関連するQ&A

  • テーブルの行削除について

    以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <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"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>

  • borderの指定方法

    var tbl = document.createElement("table"); var tbd = document.createElement("tbody"); var tr = document.createElement("tr"); var td = document.createElement("td"); td.appendChild(document.createTextNode("テストテーブル")); tr.appendChild(td); tbd.appendChild(tr); tbl.appendChild(tbd); DOMで書いたテーブルのTD要素のボーダーの指定方法で、下線だけ表示しないで枠をつけたいのですが、どのようにすればよいのでしょうか? どなたか教えてください。 よろしくお願いします。

  • 記述方法について

    よろしくお願いします。前回こちらで教えて頂いたソースを 基に表示するテーブルの並び方を変えたいと思っています。 理想の並び方は、例として くま さる           くま  さる ごりら  これらを→ごりら うま  うま           りす りす というように読み込んだエクセルのレコードを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を始めたばかりなので、まだよく理解していないので 大変申し訳ありませんが、ご指導願えればと思います。 よろしくお願いします。

その他の回答 (1)

  • 回答No.1
  • kztk
  • ベストアンサー率53% (59/110)

問題のボタンを押すと、ブラウザの下の方とかにエラーメッセージが出ませんか?「ページでエラーが発生しました」とか。 で、それをクリックしたらエラーの詳細がでませんか?「エラー:'sel'は宣言されていません。」とか。 それは、ここ↓で var c=sel.firstChild; いきなり'sel'という知らない変数が出てきたからです。 このselとは何ですか?参考にされたソース等を確認してください。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

アドバイスありがとうございました.参照したサイトにも突然でてきているのですが,そのソースだけならちゃんと動くんです…

関連するQ&A

  • 追加したテキストボックスとテキストエリアの数の制御

    下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。 で、テキストボックスとテキストエリアは最大10個までとしたいのですが、どのようにしたらいいでしょうか? あとテキストエリアを追加していくとテキストエリアとテキストエリアの間が詰まってしまいます。間を空ける方法はないでしょうか? <script type="text/javascript"> function myAdd(){ var oTR=document.createElement("tr"); var c=count("mat"); 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); } function count(name){ var tags=document.getElementsByTagName("input"); var c=0; var reg=RegExp("^"+name+"[0-9]+$"); for(var i=0;i<tags.length;i++){ if(tags[i].name.match(reg)){ c++; } } return c; } var tag_num = 4; function myTextAreaAdd(){ var oTag = document.createElement("textarea"); oTag.setAttribute("name", "foo" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } </script> </head> <body><form method="post" enctype="multipart/form-data" action="check.php"> <table id="t0" border> <tbody> <tr><td><input type="text" name="mat1" value=""></td> <td><input type="text" name="qua1" value=""></td> </tr> <tr><td><input type="text" name="mat2" value=""></td> <td><input type="text" name="qua2" value=""></td> </tr> <tr><td><input type="text" name="mat3" value=""></td> <td><input type="text" name="qua3" value=""></td> </tr> <tr><td><input type="text" name="mat4" value=""></td> <td><input type="text" name="qua4" value=""></td> </tr> </tbody> </table> <input type="button" value="追加する" onClick="myAdd()"> <br /> <span id="area"> <textarea name="foo1"></textarea> <textarea name="foo2"></textarea> <textarea name="foo3"></textarea> <textarea name="foo4"></textarea> </span><br /> <input type="button" value="追加する" onClick="myTextAreaAdd()"><br /> </form>

  • 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="OK" 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"> //3行目以降 開始 <!-- 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); }} //3行目以降 終了 // --> </script> <script type="text/javascript"> //すべての関数実行 <!-- function addAll(){ add3rd(); } // --> </script> </body> </html>

  • select option value が IE だけで動かない

    select の option 項目を追加する javascript を組んでいるのですが IE だけ項目追加ができません。Windows の Firefox2、Safari は期待 通りに項目が追加できました。 option.value を指定しないと IE でも追加できます。IE 専用に特別な 別プログラムが必要なのでしょうか。ご存知の方よろしくお願いします。 var selectBox = document.getElementById("select1"); var option = document.createElement('option'); option.setAttribute('value','my_value'); option.appendChild(document.createTextNode('my_text')); selectBox.appendChild(option); 3行目をコメントアウトすれば IE でも select にデータが追加され ますが、肝心の value がないのでプログラム的にダメなんです。

  • JavaScriptの読み込み順

    下記コードを実行すると、プルダウンメニューに値が入る前にボタンがクリックされてしまいます。 どのようなコードを書けば正常に動作するのでしょうか。 ■html内 <html> <head> <title>SCT</title> <script type="text/javascript"> onload = function() { var d = new Date() ; d.setTime((new Date).getTime()) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getFullYear()-1 ; document.getElementById('year').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getMonth()+1 ; document.getElementById('month').appendChild(newOption) ; newOption = document.createElement('option') ; newOption.value = newOption.innerHTML = d.getDate() ; document.getElementById('day').appendChild(newOption) ; } </script> <script type="text/javascript" language="JavaScript" src="./file.js"> </script> </head> <form NAME="Myfm" method="post" action="☆☆URL☆☆"> <body onLoad="yobi()"> <table border="0"> <tr> <td> <select name="startyear" id="year"> </select> </td> <td>年</td> <td> <select name="startmonth" id="month"> </select> </td> <td>月</td> <td> <select name="startday" id="day"> </select> </td> <td>日</td> </tr> <tr> <td> <select name="endyear"> <option value=201>2011 </select> </td> <td>年</td> <td> <select name="endmonth"> <option value=8>8 </select> </td> <td>月</td> <td> <select name="endday"> <option value=1>1 </select> </td> <td>日</td> </tr> <tr> <td><input type="submit" value="集計" NAME="mybut"> </td> </tr> </table> </body> </form> </html> ■file.js内 function yobi(){ document.Myfm.submit(); }

  • 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>

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

    下に書いてあるjavascriptを書き換えて、一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1&#65374;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>

  • ボタンを押してテキストボックスを追加しテーブルの作成

    avascriptでテキストボックスを追加したいのです。テーブルを組んで複数のnamaの違うボックスを追加したいです。 下記のようにイメージして書いたのですが、考えが詰まりました。 テーブルでなくても、2列複数行の形になればいいんですが・・・ 教えて下さい。よろしくお願いします。 <script type="text/javascript"> <!-- var tag_num = 4; function myAdd(){ var oTag = document.createElement("input"); oTag.setAttribute("type", "text"); oTag.setAttribute("name", "hoge" + tag_num++); oTag.setAttribute("name", "fuga" + tag_num++); var oDiv = document.getElementById("area"); oDiv.appendChild(oTag); } --> </script> </head> <body> <form id="form1" action="check.php" method="post"> <span id="area"> <table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> <tbody> <tr> <td><input type="text" name="hoge1" value=""></td> <td><input type="text" name="fuga1" value=""></td> </tr> <tr> <td><input type="text" name="hoge2" value=""></td> <td><input type="text" name="fuga2" value=""></td> </tr> <tr> <td><input type="text" name="hoge3" value=""></td> <td><input type="text" name="fuga3" value=""></td> </tr> </tbody> </table> </span> <input type="button" value="Add" onClick="myAdd()"> </form>

  • color 属性が追加できない

    <html><meta><script language="javascript"><!-- tr = document.createElement("tr"); tr.setAttribute("bgcolor", "black"); td = tr.appendChild(document.createElement("td")); td.appendChild(document.createTextNode("test")); tbody1.appendChild(tr); //--></script></head><body> <table><tbody id="tbody1"></tbody></table> </body></html> というソースなのですが,実行してもセルの背景が黒く塗りつぶされません。 setAttribute("width", "100px")などはきちんと適用されるのですが・・・。 setAttribute("style", "background-color: black;")としてもダメでした。 どのようにすればよいのでしょうか。 よろしくお願いします。

  • DOM追加時に表示されるが自動削除(?)される

    まず、初心者な質問すみません。 現在、Monacaを利用してAndroid/iPhone/iPad用のアプリを作成しています。 仕様として動的セレクトボックスで名称とLvを選択後、 押下時に画面下の一覧テーブルに行を追加する追加ボタンを作成しようとしています。 そこでDOMでテーブルの最終行に行追加を行い、セルの1つ目、2つ目、3つ目についてセル追加及び、内容の編集を行い、処理を確定させています。しかし、プレビューやAndroid版デバッガ等で確認すると、画面上で一瞬一覧テーブルに追加された後、更新の様なものがかかり、テーブルが元のヘッダーしかない状態になります。 この更新の様なものの発生を止める方法、 更新の様なものが必ず発生するのであればテーブルの情報が消えてしまうのを回避する方法、 について教えていただきたく。 --本文---- <head> <meta charset="shift-JIS"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> <script> // Set virtual screen width size to 320 pixels monaca.viewport({width: 320}); </script> <script type="text/javascript" language="JavaScript"> <!-- var abbility_Kind = new Array("all", "1", "2"); var abbility_Name = new Array(); abbility_Name["all"] = new Array("a","b","c","d"); abbility_Name["1"] = new Array("a","c","d"); abbility_Name["2"] = new Array("b"); var abbility_Lv = new Array(); abbility_Lv["a"] = new Array(1,2,3,4,5,6,7); abbility_Lv["b"] = new Array(1,2,3,4,5,6,7); abbility_Lv["c"] = new Array(1,2,3,4,5); abbility_Lv["d"] = new Array(1,2,3,4,5,6); function addSelOption(selObj, myValue, myText){ selObj.length++; selObj.options[ selObj.length - 1].value = myValue ; selObj.options[ selObj.length - 1].text = myText; } function createSelection(selObj, midashi, aryValue, aryText){ selObj.length = 0; addSelOption(selObj, midashi, midashi); for(var i=0; i < aryValue.length; i++){ addSelOption (selObj , aryValue[i], aryText[i]); } } function selectkind(obj){ createSelection(hoge.elements['name'], "", abbility_Name[obj.value], abbility_Name[obj.value]); } function selectname(obj){ createSelection(hoge.elements['level'], "", abbility_Lv[obj.value], abbility_Lv[obj.value]); } var i = 1; var maxAbbility = 10; function add(){ i++; var table1 = document.getElementById("needBody"); var row1 = table1.insertRow(-1); var cell1 = row1.insertCell(0); var cell2 = row1.insertCell(1); var cell3 = row1.insertCell(2); cell1.setAttribute("class","chk"); cell2.setAttribute("class","num"); cell3.setAttribute("class","name"); cell1.className = 'chk'; cell2.className = 'num'; cell3.className = 'name'; var HTML1 = '<input type="checkbox" name="chk' + i + '" value="' + i + '">'; cell1.innerHTML = HTML1; cell2.appendChild(document.createTextNode(new String(i))); cell3.appendChild(document.createTextNode(new String(hoge.elements['name'].value + hoge.elements['level'].value))); } --> </script> </head> <body> <font size="4px">構成</font> <form name="hoge"> <table> <tr><td>種類</td> <td></td> <td><select name="kind" onChange="selectkind(this)"> <option value="all">all</option> <option value="1">1</option> <option value="2">2</option> </select></td> </tr> <tr><td>名称</td> <td><font color="red">(※)</font></td> <td><select name="name" onChange="selectname(this)"> <option value=""></option> <option value="a">a</option> <option value="b">b</option> <option value="c">c</option> <option value="d">d</option> </select></td> </tr> <tr><td>Lv</td> <td><font color="red">(※)</font></td> <td><select name="level"></select></td> </tr> </table> <button type="submit" name="btnAdd" onClick="add()">追加</button> <font>一覧</font> <table border="1px"> <tbody id="needBody"> <tr> <th>&nbsp;</th> <th>#</th> <th>解放スキル</th> </tr> </tbody> </table> </form> </body> ----------

  • 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/ 初歩的な質問かもしれませんが、ご教授頂けると幸いです。