テーブルの行を削除・追加しても、自動的に連番になる方法

弊サイトにお問い合わせで、テーブルの行を削除または追加しても、自動的に番号を振り直せないかという質問がありましたので、自分なりに考えた結果をご紹介したいと思います。思いついたのはCSSを使った方法とJavascriptを使った方法の2種類です。

CSSを使って連番を振る方法

連番を付けたい箇所にnumberクラスを付けています。

 
<table class="numbering">
    <tr>
        <td class="number">&nbsp;</td>
        <td>あああああああ</td>
    </tr>
    <tr>
        <td class="number">&nbsp;</td>
        <td>いいいいいいい</td>
    </tr>
    <tr>
        <td class="number">&nbsp;</td>
        <td>ううううううう</td>
    </tr>
    <tr>
        <td class="number">&nbsp;</td>
        <td>えええええええ</td>
    </tr>
    <tr>
        <td class="number">&nbsp;</td>
        <td>おおおおおおお</td>
    </tr>
</table>
 

content: counter();を使ってnumberクラスの要素に番号を付けています。ただ、この方法はIE6・IE7には使えません。IE8・Firefox・Opera・Safari・Google Chromeではちゃんと表示されました。contentプロパティについては「CSS（スタイルシート）で連番・項目名などを付ける」をご覧ください。

 
.numbering {
    margin: 0 0 50px 0;
    width: 300px;
    border: 1px solid #98A0A6;
    counter-reset: num;
}
 
.numbering td {
    padding: 5px;
    background-color: #E9EAEB;
    color: #3A4956;
    font-size: 0.8em;
}
 
.numbering td.number {
    width: 10%;
    background-color: #C0DFFF;
    color: #3A4956;
    font-weight: bold;
    text-align: center;
    white-space: pre;
    counter-increment: num;
}
 
.numbering td.number:before {
    content: " " counter(num) ".";
}
 

CSSでテーブルに連番を付けたサンプル

JavaScriptを使って連番を振る方法

HTMLソースは上記のものと同じです。CSSはcontentプロパティ関連を取り除いています。

 
.numbering {
    margin: 0 0 50px 0;
    width: 300px;
    border: 1px solid #98A0A6;
}
 
.numbering td {
    padding: 5px;
    background-color: #E9EAEB;
    color: #3A4956;
    font-size: 0.8em;
}
 
.numbering td.number {
    width: 10%;
    background-color: #C0DFFF;
    color: #3A4956;
    font-weight: bold;
    text-align: center;
}
 

下記のJavaScriptを使って連番を振ります。これならIE6・IE7にも対応できると思います。
本当はもっと巧い書き方があるのだろうけど、何せJavaScriptは初心者なもんで。よろしければ使ってやってください。保証はしませんけど（笑）

 
//-------------値設定----------------------------------------------
var classN = "numbering";    //親タグに指定するクラス名
var numberN = "number";    //連番を挿入したいタグに指定するクラス名
var addTextBe = "";    //連番の前に付加したいテキスト
var addTextAf = ".";    //連番の後に付加したいテキスト
//-----------------------------------------------------------------
 
function sqNumber() {
    if (!document.getElementsByTagName) return false;
 
    var tagElements = document.getElementsByTagName("*");
    
    for (var i=0; i < tagElements.length; i++) {
        if (tagElements[i].className.match(classN)) {
 
            var intagElements = tagElements[i].getElementsByTagName("*");
            var k=1;
            for (var j=0; j < intagElements.length; j++) {
                if (intagElements[j].className.match(numberN)) {
                    intagElements[j].innerHTML = addTextBe + k++ +addTextAf;
                }
            }
        }
    }
}
 
try{
    window.addEventListener("load",sqNumber,false);
}catch(e){
    window.attachEvent("onload",sqNumber);
}
 

JavaScriptでテーブルに連番を付けたサンプル

ファイルダウンロード[約1KB]

それにしても、「こんなことできますか？」という質問とかは、自分は頼りにされているんだなぁという気がして嬉しいです。かずやんさん、これからも質問どんどん受け付けますので、質問攻めぐらいの勢いでじゃんじゃんメールください。