5

こんにちは、仲間のコーダー、

次のように、事前に作成された動的な空白のテーブルに番号付け（および可能であれば色付け）を入力する方法を探しています。

5x5グリッド
ご覧のとおり、番号は斜めに昇順です。テーブルのtdインデックスに基づいて数値を計算する方法はおそらくあると思いますが、すべての列に対して対角線上でそれを行う方法を完全に理解することはできません。どんな助けでもいただければ幸いです。

更新：私の休日から戻ってOK。賢い人たちに返事をくれてありがとう。クライアントの首の痛みを経験しなければならなかったと確信しているので、仕様が変更されたと言われました（再び）。これは、グリッド/マトリックスをデータベースに配置し、ピボットテーブルを使用して出力する必要がある場合です。すべての正方形は、色ごとにカスタマイズ可能である必要があります。

私は以前に知らなかったあなたの応答からかなりの数の気の利いた新しいjavascript/jqueryのトリックを学びましたが、何も無駄になることはありません。

これが私が最終的に思いついたものです。

カスタムグリッド

4

3 に答える 3

3

「可能であれば色付け」と言ったので、希望どおりに色を付けないソリューションの例を提供します（コーディングが簡単で、見た目がより魅力的であると感じた方法で行います）が、処理しますさまざまなテーブルサイズに対してすべての番号付けが正しく行われます。

以下の関数は、テーブルが既に存在することを前提としています。このデモでは、指定したサイズのテーブルを生成し、以下の関数を呼び出して番号付けと色を行うコードを含めました。

function numberDiagonally(tableId) {
    var rows = document.getElementById(tableId).rows,
        numRows = rows.length,
        numCols = rows[0].cells.length,
        sq = numRows + numCols - 1,
        d, x, y,
        i = 1,
        dc,
        c = -1,
        colors = ["green","yellow","orange","red"];

    diagonalLoop:
    for (d = 0; d < sq; d++) {
        dc = "diagonal" + d;
        for (y = d, x = 0; y >= 0; y--, x++) {
            if (x === numCols)
                continue diagonalLoop;
            if (y < numRows)
                $(rows[y].cells[x]).html(i++).addClass(dc);
        }
    }
    for (d = 0; d < sq; d++)
        $(".diagonal" + d).css("background-color", colors[c=(c+1)%colors.length]);
}

デモ: http://jsfiddle.net/7NZt3/2

私が思いついた一般的なアイデアは、x と y の寸法のどちらか大きい方の 2 倍の大きさの正方形を想像し、ループを使用して、その境界正方形の左端から右に上がる対角線を作成することでした。つまり、番号を希望する順序で。編集:長辺の 2 倍の大きさはなぜですか? それは、コーディングを開始したときに頭に浮かんだ最初のことであり、機能したためです（i表示される数値を保持する変数は、虚数セルに対してインクリメントされないことに注意してください）。sq考える時間ができたので、行数と列数を足した数よりも正確に 1 少ない数に変数を設定できることに気付きました。上記のコードとそれに応じて更新されたフィドル。

背景色は最初のループで直接設定できますが、代わりに、クラスを割り当てて、後で各クラスのループを設定することを選択したことに注意してください。当時は、単一のクラス セレクターを使用して jQuery で個々の対角線を簡単に選択できることを意味していたため、良いアイデアのように思えました。

残りがどのように機能するかを正確に説明することは、読者の演習として残されています...

更新 - このバージョンは、あなたが求めたように色付けを行います: http://jsfiddle.net/7NZt3/1/ (私の意見では、それほどきれいではありませんが、それぞれ独自のものです)。

于 2012-06-23T12:10:01.007 に答える
1

これは、あなたが求めたことを行うjsFiddleです - http://jsfiddle.net/jaspermogg/MzNr8/8/

私は自由にユーザーがカスタマイズできるようにしました。このメソッドを使用してブラウザが 1000x1000 のテーブルをレンダリングするのにかかる時間を見るのは興味深いです:-D

各セルの ID が であると仮定すると、一[column]x[row]辺の長さが の正方形のテーブルの数字を入力する方法のコードは次のとおりですsidelength。

//populate the cells with numbers according to the spec
function nums(){

    var xpos = 0
    var ypos = 0     
    var cellval = 1

        for(i=0;i<2*sidelength;i++){

            if(i >= sidelength){

                ypos = sidelength - 1
                xpos = 1 + i - sidelength
                $('td#' + xpos + 'x' + ypos).text(cellval)
                cellval = cellval + 1        

                while(xpos + 1 < sidelength){
                    ypos = ypos-1
                    xpos = xpos+1
                    $('td#' + xpos + 'x' + ypos).text(cellval)
                    cellval = cellval + 1
                }

            } else {

                ypos = i
                xpos = 0        
                $('td#' + xpos + 'x' + ypos).text(cellval)
                cellval = cellval + 1

                while(!(ypos-1 < 0)){
                    ypos = ypos-1
                    xpos = xpos+1
                    $('td#' + xpos + 'x' + ypos).text(cellval)
                    cellval = cellval + 1
                }        

            }

        }

}

そして、ここにバガーを着色する方法があります.

// color the cells according to the spec
function cols(){
        if(+$('td#0x0').text() === 99){
        return false
        } else {
            $('td').each(function(index, element){
                if(+$(this).text() > 22)
                {
                    $(this).attr("bgcolor", "red")
                } 
                if(+$(this).text() <= 22)
                {
                    $(this).attr("bgcolor", "orange")
                }
                if(+$(this).text() <= 14)
                {
                    $(this).attr("bgcolor", "yellow")
                }
                if(+$(this).text() <= 6)
                {
                    $(this).attr("bgcolor", "green")
                }
            })
        }
}

楽しんでね？:-)

于 2012-06-23T12:47:00.070 に答える
1

このフィドルは、既存のテーブルに数値と色を設定します。5x5 テーブルに限定されません。15黄色ではなくオレンジ色であるという論理が理解できなかったので、単純に対角線のセルを色の領域にグループ化しました。

// we're assuming the table exists
var $table = $('table'),
    // cache the rows for quicker access
    $rows = $table.find('tr'),
    // determine number of rows
    _rows = $rows.length,
    // determine number of cells per row
    _cols = $rows.first().children().length,
    // determine total number of cells
    max = _rows * _cols,
    // current diagonal offset (for coloring)
    d = 1,
    // current row
    r = 0,
    // current cell
    c = 0;

for (var i=1; i <= max; i++) {
    // identify and fill the cell we're targeting
    $rows.eq(r).children().eq(c)
        .addClass('d' + d)
        .text(i);

    if (i < max/2) {
        // in the first half we make a "line-break" by 
        // moving one row down and resetting to first cell
        if (!r) {
            r = c + 1;
            c = 0;
            d++;
            continue;
        }
    } else {
        // in the second half our "line-break" changes to
        // moving to the last row and one cell to the right
        if (c + 1 == _cols) {
            c = 1 + r;
            r = _rows -1;
            d++;
            continue;
        }
    }

    r--;
    c++;
}
于 2012-06-23T12:09:44.270 に答える