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

这应该可以解决您的问题！

我无法使用选择器获取正确的索引，但我决定使用父 * 行大小计算当前索引

$('td').on('click', function(){
    $('td').css('background', ''); //reset
    var index = $(this).index() + ($(this).parent().index() * 3); //curent index
    for(var x = 0, y = index; y--; x++){
        $('td').eq(x).css('background', '#ff9900');
    }
});

http://jsfiddle.net/mT7zn/2/

于 2013-05-28T11:36:22.887 回答
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 回答
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 回答
0

您应该以某种方式“标记”表格中的坐标，以便每个单元格都知道其坐标。一种可能的解决方案包括（数据）属性。在您的代码中，您应该检查极端情况：1）在第 1 行中，上面没有行 2）在第 3 行中，下面没有行 4）从 1.1、2.1、3.1 离开没有元素 5）从 1.3 开始, 2.3 3.3 不是元素。

一旦你有了这个基石，就很容易编写一个通用函数。

于 2013-05-27T12:37:19.953 回答