アプリ版：「スタンプのみでお礼する」機能のリリースについて

tableの中のtableが追加できない。

解決済

  • 質問者：take_july
  • 質問日時：
  • 回答数：2件

罫表追加ボタンを押すと既存の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;
}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

  • 回答者： steel_gray
  • 回答日時：

あんまりちゃんと見てませんが、tbodyを扱っているでしょうか？


tbodyは1つの場合書かなくてもよい事になっていますが、記述の省略が許されているだけで、必ず存在します。
Javascriptで生成する場合、ちゃんとtbodyを扱わないと、
tableに直接trをappendChildで追加しても表示されないのかも？
    • good
    • 0
    • 件
通報する
この回答へのお礼

まったくその通りでした。
上手く行きました。
大変感謝です。

通報する
お礼日時：2008/08/22 19:00

No.2

  • 回答者： tao_0077
  • 回答日時：

IE の DOM 使用の際に、Table 作成時には tbody 要素が必要なようです。


念のため、元の table にも tbody を追加し、動的に table を作成する際には table の子供に tbody を作るようにするとうまくいくんではないでしょうか。
Firefox ではうまくいくようです。
# 提示のソースではエラーが出るようですが…。
    • good
    • 0
    • 件
通報する
この回答へのお礼

エラーでちゃいますか。。すいません。
tbodyを追加したら上手く行きました。

有難うございました。

通報する
お礼日時：2008/08/22 19:01

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報