Question

我有一张桌子，看起来像这样：

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

例如，如果我点击2.2什么是获得所有方块的最佳方法？

Answer 1

读取所点击单元格的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/

Answer 2

如果每个单元格的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()

}

Answer 3

为了完整答案而编辑，

加价 -

<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将拥有所有触摸框。

Answer 4

您可以在点击周围的所有单元格中指定一个类，只是拒绝单击该单元格。

$('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/

Answer 5

这可以解决你的问题！

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

$('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/

Answer 6

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

一旦你掌握了这个基石，就可以轻松编写一个通用函数。

如何获得所有类型的广场

6 个答案: