- ベストアンサー
tableの中のtableが追加できない。
罫表追加ボタンを押すと既存のtableの中に新しくtableを追加する 処理を作成しましたが、追加した罫表が正しく表示されません。 罫表追加後、innerHTMLでテキストボックスに表示し、それをコピーして、HTMLで開いてみるときちんと追加されているようです。 なぜtableの中のtableが作られないのでしょうか。 別の方法でも良いので、ボタンをおした時に動的にtableの中にtableを追加する方法ありますでしょうか。 以下HTMLとjsです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="kei_test.js"></script> </head> <body> <div> <input type="button" value="罫表追加" onclick="addDanraku('keihyou')" /> </div> <form name='form1'> <input type="text" name="strJbnTxt" size=100 maxlength=10000 /> </form> <table width="100%" border=1 style='border-collapse:collapse;border:none'> <tr> <td style='width:100.0%;border:solid windowtext 1.0pt'> <p>あいうえお。</p> </td> </tr> <tr> <td style='width:100.0%;border:solid windowtext 1.0pt;'> <p>かきくけこ。</p> </td> </tr> </table> </body> </html> 以下jsファイル var cellCnt = 0; var rowArray = new Array(100); var colArray = new Array(100); window.onload = init; function init(){ var mouseFlg = 0; var col; var row; var td = document.getElementsByTagName("td"); var length = td.length; //alert('td数:'+length); for(var i = 0; i < length; i++) { td[i].onclick = function (){ this.style.backgroundColor = "yellow"; //列番号取得 var befTd = this.previousSibling; var col = 0; while(befTd){ if(befTd.nodeName=="TD")col++; befTd=befTd.previousSibling; } //行番号取得 var befTr = this.parentNode.previousSibling; var row=0; while(befTr){ if(befTr.nodeName=="TR") row++; befTr=befTr.previousSibling; } rowArray[cellCnt] = row; colArray[cellCnt] = col; cellCnt = cellCnt + 1; } } } function addDanraku( danraku ){ if( cellCnt != 1){ alert("１つのみ選択して実行してください。"); return; } //trを取得 var trNode = document.getElementsByTagName("tr"); var trLength = trNode.length; for(var i = 0; i < trLength; i++) { if( i == rowArray[0]){ //新しい段落（tr）を追加 var newTr = document.createElement("tr"); var nextTr = trNode[i].nextSibling; var oyaTable = nextTr.parentNode; oyaTable.insertBefore(newTr, nextTr); //tdを追加 var newTd = document.createElement("td"); newTd.style.width = "100.0%"; newTd.style.border = "solid windowtext 1.0pt"; newTr.appendChild(newTd); //tableノードを追加 alert(newTd.nodeName); var newTable = document.createElement("table"); newTable.style.border = "none"; newTable.style.borderCollapse = "collapse"; newTd.appendChild(newTable); //trノードを追加 for(var j = 0; j < 2; j++) { var newTr2 = document.createElement("tr"); newTable.appendChild(newTr2); for(var k = 0; k < 2; k++) { //tdノードを追加 var newTd2 = document.createElement("td"); newTd2.style.width = "100.0pt"; newTd2.style.border = "solid windowtext 1.0pt"; newTr2.appendChild(newTd2); //pノードを追加 var newP2 = document.createElement("p"); newTd2.appendChild(newP2); //textノードを追加 var newText2 = document.createTextNode("追加テスト"); newP2.appendChild(newText2); } } } } form1.strJbnTxt.value = newTr.parentNode.parentNode.parentNode.innerHTML; }
- take_july
- お礼率54% (88/162)
- JavaScript
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
あんまりちゃんと見てませんが、tbodyを扱っているでしょうか？ tbodyは1つの場合書かなくてもよい事になっていますが、記述の省略が許されているだけで、必ず存在します。 Javascriptで生成する場合、ちゃんとtbodyを扱わないと、 tableに直接trをappendChildで追加しても表示されないのかも？
その他の回答 (1)
- tao_0077
- ベストアンサー率48% (33/68)
IE の DOM 使用の際に、Table 作成時には tbody 要素が必要なようです。 念のため、元の table にも tbody を追加し、動的に table を作成する際には table の子供に tbody を作るようにするとうまくいくんではないでしょうか。 Firefox ではうまくいくようです。 # 提示のソースではエラーが出るようですが…。
お礼
エラーでちゃいますか。。すいません。 tbodyを追加したら上手く行きました。 有難うございました。
関連するQ&A
- 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要素のボーダーの指定方法で、下線だけ表示しないで枠をつけたいのですが、どのようにすればよいのでしょうか？ どなたか教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- テーブルにおける行(セルにプルダウン含む）の追加方法
追加ボタンを押度に，テーブルに１行ずつ追加されるプログラムを組んでいるのですが，追加ボタンを押しても何も起こりません．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
- DOM？ tableの記述について
よろしくお願いします。 tbody内をループさせて表示させるスクリプトを作ってみました。 ここで質問なのですが、表示内容を横にできるのでしょうか？ イメージとしては・・ A01 A02 A03 B01 B02 B03 を以下のように A01 B01 A02 B02 A03 B03 no のようにしたいのです。 ただのHTMLなら <html> <head> <title>test</title> </head> <body> <table border=0> <tr> <td> <table border=0> <tr><td>A01</td></tr> <tr><td>A02</td></tr> <tr><td>A03</td></tr> </table> </td> <td> <table border=0> <tr><td>B01</td></tr> <tr><td>B02</td></tr> <tr><td>B03</td></tr> </table> </td> </tr> </table> </body> </html> みたいな感じでできると思うんですが、以下のソースだと どうしても表示されなくなります。どこをどうすると よろしいでしょうか？どうかよろしくお願いします。 ------------------------------------------------- <html> <head> <title>TABLE TEST</title> <script> function tsample() { var mybody=document.getElementsByTagName("body").item(0); mytable = document.createElement("TABLE"); mytr = document.createElement("TR"); mytablebody = document.createElement("TBODY"); for(j=0;j<4;j++) { mycurrent_row=document.createElement("TD"); mytablet =document.createElement("TABLE"); for(i=0;i<3;i++) { mycurrent_cell=document.createElement("TR"); mycurrent_cen=document.createElement("TD"); currenttext=document.createTextNode("NO "+j+" LNO "+i+" "); mycurrent_cen.appendChild(currenttext); mycurrent_cell.appendChild(mycurrent_cen); } mycurrent_row.appendChild(mytablet); mytablebody.appendChild(mycurrent_row); } mytable.appendChild(mytablebody); mybody.appendChild(mytr); mybody.appendChild(mytable); mytable.setAttribute("border","2"); } </script> </head> <body onload="tsample()"> </body> </html>
- ベストアンサー
- JavaScript
- テーブルの行削除について
以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <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>
- ベストアンサー
- 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>
- ベストアンサー
- その他（学問・教育）
- 記述方法について
よろしくお願いします。前回こちらで教えて頂いたソースを 基に表示するテーブルの並び方を変えたいと思っています。 理想の並び方は、例として くま さる くま さる ごりら これらを→ごりら うま うま りす りす というように読み込んだエクセルのレコードを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
- 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;")としてもダメでした。 どのようにすればよいのでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- appendChildとinnerHTMLを短く
テーブルのthタグと内容を追加したい ・下記で期待通り動作するのですが、冗長かなと思い、スッキリさせたいです ・どうすれば良いでしょうか？ var tr = document.createElement("tr"); tbody.appendChild(tr); var th = document.createElement("th"); th.innerHTML = '見出1'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出2'; tr.appendChild(th); var th = document.createElement("th"); th.innerHTML = '見出3'; tr.appendChild(th); var th = document.createElement("th"); ……
- ベストアンサー
- JavaScript
- 追加したテキストボックスとテキストエリアの数の制御
下記のようにテキストボックスとテキストエリアの数をボタンを押すことによって増やしていきます。 で、テキストボックスとテキストエリアは最大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
- tableの生成
お世話になります。 以下のソースはテーブルを生成するサンプルソースなんですけど、tdの中に配列の要素をきちんと表示させることが出来ません。 どうしたらちゃんと表示させることが出来るかご教授いただけないでしょうか？ *今は配列の要素がtdの中に全部入ってしまっている状態です。 <html> <head> <title>サンプルコード</title> <script> mylist = new Array( // データ定義 "Ａさんのホームページ", "Ｂさんのホームページ", "Ｃさんのホームページ", "Ｄさんのホームページ", "Ｅさんのホームページ", "Ｆさんのホームページ" ); function start() { var mybody=document.getElementsByTagName("body").item(0); //全ての body 要素リストをこのようにして取得// mytable = document.createElement("TABLE"); mytablebody = document.createElement("TBODY"); for(j=0;j<3;j++) { mycurrent_row=document.createElement("TR"); for(i=0;i<2;i++) { mycurrent_cell=document.createElement("TD"); currenttext=document.createTextNode(mylist); mycurrent_cell.appendChild(currenttext); mycurrent_row.appendChild(mycurrent_cell); } mytablebody.appendChild(mycurrent_row); } mytable.appendChild(mytablebody); mybody.appendChild(mytable); mytable.setAttribute("border","2"); } </script> </head> <body> <script type="text/javascript"> start() </script> </body> </html>
- ベストアンサー
- JavaScript
お礼
まったくその通りでした。 上手く行きました。 大変感謝です。