WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:JavaScript innerHTMLを使用して・・・

0:[投稿] ひらめ [2004/03/09 14:56 ][環境:IE5.5 windows2000Server]

お世話になります。
innerHTMLを使ってパラメータによってテーブルを出したり
消したりしたいのですがうまくいきません。
フォームにはどのような定義を書けば良いのでしょうか?
分かる方が居ましたらよろしくお願いします。


1:[回答] かれい [2004/03/09 16:06 ]

innerHTMLとパラメータとテーブルとフォームの関係がまったく見えないのだが、どう答えろと…
質問の意味が相手に伝わっているか、自分で読み直してごらん。

「うまくいかない」というソースを載せたほうが、意図が伝わるのでは?


2:[回答] … [2004/03/09 16:41 ]

>>1
多分,入力フォールドにパラメータを入力してもらって,
それからテーブルを生成したい,ということではないかと。

>>0
innerHTML は標準仕様ではないので,安易な方法に流されず,
標準仕様のDOMインタフェイスを使って適当に作ってみました。
WinIE6,IE5.1:mac,Mozilla1.6,Opera7.2 で動作確認済みです。

書式は,行は改行で,列はセル内容を ", " で区切るというものです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <title>テーブルの生成・削除</title>
 <style type="text/css">
 <!--
 table { margin: 1em; }
 table, th, td { border: solid 1px black; }
 -->
 </style>
 <script type="text/javascript">
 <!--
 function createTable()
 {
   var
   input  = document.getElementById('input');
   cTable = document.createElement('table');
   cTBody = document.createElement('tbody');
   rows   = input.value.replace(/^[\r\n]+|[\r\n]+$/g,'').replace(/[\r\n]+/g,'\n').split('\n');
   for (var i=0; i<rows.length; i++)
   {
     cTr = document.createElement('tr');
     for (var n=0, cells=rows[i].split(/,[ \t]+/); n<cells.length; n++)
     {
       cTd = document.createElement('td');
       cTd.appendChild(document.createTextNode(cells[n].replace(/\s+$/g,'')))
       cTr.appendChild(cTd);
     }
     cTBody.appendChild(cTr);
   }
   cTable.id = "createdTable";
   cTable.appendChild(cTBody); removeTable();
   document.body.appendChild(cTable);
 }
 function removeTable()
 {
   if (table = document.getElementById('createdTable')) {
     table.parentNode.removeChild(table);
   }
 }
 //-->
 </script>
</head>
<body>

<textarea rows="5" cols="50" id="input">foo1.1, bar1.2, baz1.3
foo2.1, bar2.2, baz2.3
foo3.1, bar3.2, baz3.3
</textarea>
<div class="buttons">
 <input type="button" value="Create Table!" onclick="createTable()"><input
        type="button" value="Remove Table!" onclick="removeTable()">
</div>

</body>
</html>

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World