html - 番号付きリストの使い方表の各行に番号を付ける

Question

一部の情報を正しい形式で表示するために使用する HTML テーブルがあります。

今、私の目標は、各表の行に番号を付けることです。

そのために、テーブル内で ordererd list と list items を使用しようとしましたが、うまくいかないようです。

これを行う方法についてのアイデアと例がありますか。ありがとうございました。

Answer 1

HTMLについてよくわからない場合は、jQueryで間違いなくこれを行うことができます:

$(function () {
    var i = 0;
    $('table thead tr').prepend('<th>#</th>');
    $('table tbody tr').each(function () {
        i += 1;
        $(this).prepend('<td>' + i + '</td>');
    });
});​ 

デモ

アップデート

指定したクラス (番号) の番号のみが必要な場合は、次を試してください。

$(function () {
    var i = 0;
    $('table thead tr').prepend('<th>#</th>');
    $('table tbody tr').each(function () {

         i += 1;

        if($(this).hasClass('number')) {
            $(this).prepend('<td>' + i + '</td>'); 
        } else {
            $(this).prepend('<td></td>');
        }
    });
});​

デモ

Answer 2

念のため、TH を除く、テーブル内の最初の TD をすべて取得する単一行セレクターを次に示します。次に、必要な要素をそれらの前に追加します。この場合、カウンター変数を出力して、行を列挙します。その効果は、テーブルの行に番号を付けていることです。

var counterVariable = 1;
var mySpanClass = ""; //to style the numbering...

    $(".myTableClass tr:not(:first) td:first-child").before(function(){ return "<span class='" + mySpanClass + "'>" + counterVariable++ + "</span>"; });