javascriptを用いて表の各行へ自動的に番号付けする

javascript xhtml css

自分のWebページに表を作り，1行ごとに番号をつける場合，直接番号を書いてしまうと，修正時に行の追加/削除を行うたびに番号を付け直さなければなりません．番号リストであれば，このようなことは起こりませんが，表の場合には起こりえます．こういうめんどくさいことは自動化します．

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">

<head>
  <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
  <meta http-equiv="Content-Script-Type" content="text/javascript"/>
  <script type="text/javascript">
    //<![CDATA[
      function Event_onload()
      {
        var hogeTable = document.getElementById('HogeTable');
        var TRs = hogeTable.getElementsByTagName('tr');
        for(var i=1 ; i<TRs.length ; ++i)
        {
          var nodes = TRs[i].childNodes;
          if(nodes)
          {
            if(nodes[0].tagName.toLowerCase() == 'td')
            {
              nodes[0].innerHTML = '<strong>' + i + '</strong>';
            }
          }
        }
      }
    //]]>
  </script>
  
  <meta http-equiv="Content-Style-Type" content="text/css"/>
  <style type="text/css">
    table {
      font-size: 10pt;
      font-family: Vardana, Arial, "MS ゴシック";
      color: #000000;
      border-collapse: collapse;
      border: 1px solid #666;
      border-spacing: 0;
      empty-cells: show;
    }
    tr {
      padding: 5px;
      border: 1px solid #666;
    }
    th {
      padding: 5px;
      border: 1px solid #666;
    }
    td {
      padding: 5px;
      border: 1px solid #666;
    }
  </style>
  
  <title>自動的に番号をつける</title>
</head>

<body onload='Event_onload()'>
  <table id="HogeTable">
    <tr>
      <th>Column1</th><th>Column2</th><th>Column3</th>
    </tr>
    <tr>
      <td></td>
      <td>javascript</td>
      <td>使う</td>
    </tr>
    <tr>
      <td></td>
      <td>いろんなことが</td>
      <td>できる</td>
    </tr>
    <tr>
      <td></td>
      <td>実験</td>
      <td>あるのみ</td>
    </tr>
  </table>
</body>
</html>

loadイベント時にtrタグを取得し，tr以下にあるtdタグの内，1番最初のものに番号をセットしています．
出力結果

Column1 Column2 Column3
1 javascript 使う
2 いろんなことが できる
3 実験 あるのみ

もっと簡単に実現する方法があるのかもしれませんが，現時点では知りません．(´ω｀)