1

テーブルがあり、次のようになります。

| | 1.1 | 1.2 | 1.3 |
____________________
| | 2.1 | 2.2 | 2.3 |
____________________
| | 3.1 | 3.2 | 3.3 |

たとえば、2.2 をクリックした場合、すべての四角形を配置する最善の方法は何ですか?

4

6 に答える 6

2

cellIndexクリックされたセルとrowIndexその親TRノードのプロパティを読み取ります。これにより、セルの座標が得られます。

coords = function(td) {
    return [td.cellIndex, td.parentNode.rowIndex];
}

隣接する行と列の配列を作成します。

    var adj = [
        [x - 1, y - 1],
        [x - 0, y - 1],
        [x + 1, y - 1],

        [x + 1, y - 0],
        [x - 1, y - 0],

        [x - 1, y + 1],
        [x - 0, y + 1],
        [x + 1, y + 1]
    ];

テーブル内のすべてのセルを反復処理し、座標が配列内にあるセルをマークします。

    var tds = game.getElementsByTagName("TD");
    [].forEach.call(tds, function(td) {
        if(contains(adj, coords(td)))
            td.className = "hot";
        else
            td.className = "";
    });

完全な作業例: http://jsfiddle.net/FByXq/

于 2013-05-27T13:48:37.447 に答える
1

私の答えを完全にするために編集します-

マークアップ-

<table id="" border=1 cellspacing=0>
    <tr><td id="0-0">M</td><td id="0-1">M</td><td id="0-2">M</td></tr>
    <tr><td id="1-0">M</td><td id="1-1">M</td><td id="1-2">M</td></tr>
    <tr><td id="2-0">M</td><td id="2-1">M</td><td id="2-2">M</td></tr>

</table>

jQuery スクリプト-

    $(function () {
        $("td").on("mouseover", function (event) {

        $("td").css("background","");
        var selectedBox = this.id;

        var selectedBoxRow = parseInt(selectedBox.split("-")[0]);
        var selectedBoxColumn = parseInt(selectedBox.split("-")[1]);

        var arrayOfNeighBours = [];

        for (var row = -1; row <= 1; row++) {
            for (var column = -1; column <= 1; column++) {
                var aNeighbour = ((selectedBoxRow + row) + "-" + (selectedBoxColumn + column));
                if (aNeighbour != selectedBox) {

                    $("#"+aNeighbour).css("background","blue");
                    arrayOfNeighBours.push(aNeighbour);
                }
            }
        }

    });
});

arrayOfNeighBoursすべての感動的なボックスがあります。

于 2013-05-27T12:40:20.190 に答える
1

これは、各セルの id/name/someSelector が のように行/列によって論理的に順序付けられている場合に実行できますa1, a2。

次/前の列と次/前の行を取得する関数を作成します。これはテストされていませんが、コンセプトは機能するはずです。

function grabSurroundingBoxes(origElementId){
    var id = origElementId;
    var row = id[0];
    var col = parseInt(id[1]);

    var nextRow = String.fromCharCode(col.charCodeAt(0) + 1);
    var nextCol = col + 1;

    // grab the next element based on the concat of nextRow + nextCol.toString()

}
于 2013-05-27T12:37:44.513 に答える
1

クリックされたセルを拒否するだけで、クリックされたセルの周りのすべてのセルにクラスを割り当てることができます。

$('td').on('click', function(){
    $(this).css('background', '#fff'); //reset
    $('td').not(this).css('background', '#ff9900'); //Adds background color in all cells except the cell clicked
});

http://jsfiddle.net/gusatvo_beavis/mT7zn/

于 2013-05-27T12:40:38.183 に答える
0

各セルがその座標を認識できるように、何らかの形でテーブルの座標を「マーク」する必要があります。考えられる解決策の 1 つに、(データ) 属性が含まれます。コードでは、極端な場合をチェックする必要があります: 1) 1 行目では、上に行はありません 2) 3 行目では、下に行はありません 4) 1.1、2.1、3.1 の左には要素がありません 5) 1.3 からの右、2.3 3.3 は要素ではありません。

この基礎を理解すれば、汎用関数を簡単に作成できます。

于 2013-05-27T12:37:19.953 に答える