- ベストアンサー
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を追加したら上手く行きました。 有難うございました。
お礼
まったくその通りでした。 上手く行きました。 大変感謝です。