Entry

JavaScript メモ - table 要素を動的に変化させる

2007年03月05日

巷ではおなじみなので,本当にメモなんですが……。

MSIE の場合,tr 要素の innerHTML は読み取り専用という「仕様」なんだそうで,Fx のようにガリガリと innerHTML をいぢることはできません。ここら辺の詳しいことは,ご本家にも載っているので(参照:「How to Build Tables Dynamically」),周知の通り。

じゃあどうすればいいのかというと,こんな風にするみたい。「add」ボタンを押すと行が増えていく,という単純なスクリプトです。20個行を作ったら,「もう作れないよ」と怪しげな英語で教えることにしています(これはどうでもいいんですけど)。検証は IE6 と Fx2 で行いました。

<html>
<head>
<script><!--
  var iId = 0;
  function add() {
    iId++;
    if (iId > 20) {
      alert("You Cannot Create A Record Any More...");
      return;
    }
    // Create Record
    var body = document.getElementById("tblBody");
    var elemTR = body.insertRow(-1);
    var elemTD1 = elemTR.insertCell(-1);
    var elemTD2 = elemTR.insertCell(-1);
    var elemTD3 = elemTR.insertCell(-1);
    var elemTD4 = elemTR.insertCell(-1);
    // Create ID
    strId = "del" + iId;
    // Insert HTML
    elemTD1.innerHTML = '<input type="button" value="' + strId + '"/>';
    elemTD2.innerHTML = 'FOO';
    elemTD3.innerHTML = 'BAR';
    elemTD4.innerHTML = 'BAZ';
  }
--></script>
<title>行挿入のテスト</title>
</head>
<body>
<h1>行挿入のテスト (MSIE対応版)</h1>
<form id="frm1" method="post">
  <input type="button" value="add" onClick="add()" id="btnAdd"/>
  <table id="tbl" width="100%" border="1">
    <thead id="tblHead">
      <tr id="tblHead">
        <th id="fooHead" width="100px"> </th>
        <th id="barHead" width="34%">foo</th>
        <th id="bazHead" width="33%">bar</th>
        <th id="bazHead" width="33%">baz</th>
      </tr>
    </thead>
    <tbody id="tblBody">
    </tbody>
  </table>
<form>
</body>
</html>

insertRow() で行を作って,しこしことセルに目的の値を入れていけばいいようです。td 要素については innerHTML に書き込むことができるようなので,実際はここに HTML を埋め込んでいくことになります。

最初は DOM オブジェクトを使ってゴニョゴニョやっていたんですけれど,こっちの方がお手軽なのかも。なんだか JavaScript って疲れますよ……ほんと(デバッグしづらいし)。

Trackback
Trackback URL:
[2011年03月29日 22:19] [プログラミング]JavascriptでTableを操作 from おし、プログラミング
内容 タイトル通りJavascriptでTableを操作してみた。 ソースコード https://gist.github.com/892316 <... [more]
Ads
About
Search This Site
Ads
Categories
Recent Entries
Log Archive
Syndicate This Site
Info.
クリエイティブ・コモンズ・ライセンス
Movable Type 3.36
Valid XHTML 1.1!
Valid CSS!
ブログタイムズ

© 2003-2012 AIAN