罫表追加ボタンを押すと既存の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("1つのみ選択して実行してください。");
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;
}
No.1ベストアンサー
- 回答日時:
あんまりちゃんと見てませんが、tbodyを扱っているでしょうか?
tbodyは1つの場合書かなくてもよい事になっていますが、記述の省略が許されているだけで、必ず存在します。
Javascriptで生成する場合、ちゃんとtbodyを扱わないと、
tableに直接trをappendChildで追加しても表示されないのかも?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
パス付きサイトのjavascript解析
-
イベントが初めの一回しか起き...
-
【西暦等の変換】
-
15パズルの作り方が分かりません!
-
ジェネレーターの作り方
-
javascriptの正規表現で変数を扱う
-
C#で、ContextMenuStripに動的...
-
javascriptで月末の日付を表示...
-
ASP.NETのコントロールの値をJa...
-
google apps scriptの終了のさせ方
-
選択範囲の取得と設定(JavaScript)
-
イベント座標の取り方について
-
JavaScriptでスライドショーを2...
-
JavaScriptの時計の表示
-
船のゲームを作っているのです...
-
gas スプレッドシートがアクテ...
-
JavaScriptのフォントの大きさ
-
JavaScriptの値を表示するには
-
JavaScriptエラーが出ます…
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
C#OpenCv V4にのエラーに関する...
-
食材の期限を管理するためにGAS...
-
google apps scriptの終了のさせ方
-
このプログラムに、王手をかけ...
-
このプログラムに王様の逃げ道...
-
この将棋プログラムに王様ゲッ...
-
ASP.NETのコントロールの値をJa...
-
ジェネレーターの作り方
-
GASでundefinedエラーが出ます
-
なぜmatchメソッドがエラーにな...
-
ASP.NET MVCでObjectをjsに渡す
-
C#で、ContextMenuStripに動的...
-
html javascript リンク先アド...
-
HTMLで作った時報アプリが動き...
-
翌月を取得するGASが分かりません
-
イラレでナンバリングする方法
-
HTMLにWSHを組み込む
-
gas スプレッドシートがアクテ...
-
getElementByIdでASP.NETのText...
-
APIを使って埋め込んだグーグル...
おすすめ情報