Question

我正在寻找一种制作网格的方法（现在使用Table，但很快就会使用div）。让我们点击第一个单元格（x，y = 1，-1）我想要更改2个单元格宽度和3个单元格高度的背景颜色。（总共改变了6个细胞）......

如果使用div更容易，请继续...请使用jQuery！：）

我真的不知道怎么做这个，如果有人能把我放在路上或者给我一个应该做的代码......或者更好，教程XD ...

我非常感谢你的帮助，100次谢谢

编辑：

我在这里尝试做的是一个看不见的格斗，使系统可以与类似rts的游戏相媲美，其中建筑物是透明的并且跟随鼠标但是当你移动时它附着在网格上，并且在clikc上建造下垂（没有透明度）......解释这一点，这样你就可以在这里看到一些视觉效果。

Answer 1

以下是div（因为它是长期目标）：

首先，我做了一个小标记，就像一张桌子。

html是：

<div id="overall">
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>   
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>       
    </div>
    <div class="row">
        <div class="cell col0"></div><div class="cell col1"></div><div class="cell col2"></div><div class="cell col3"></div>    
    </div>   
</div>

使用以下css：

.row{
    height:25px;
}
.cell{
    width:25px;
    height:100%;
    display:inline-block;
    border:1px solid black;
}

所以它有一个像display这样的表（它是一串由单元组成的行，同一列中的单元共享一个类）。

要执行您想要的操作，您似乎需要将点击功能与每个.cell相关联。

使用$(".cell").click(function(){});

这样做很容易

现在，是时候完成这个功能了。

现在，下一步是着色您需要着色的单元格。要添加颜色，我们将使用一个特殊的类（这样我们可以轻松地更改更多内容）：

.clickedCell{
    background:red;
}

最难的部分是选择6个细胞。可以使用多种方式（例如，我们可以使用像A1，A2，B1，B2这样的id网格，并使用id选择它们），效率/设计在很大程度上取决于你对div的标记。

我这样做的方法如下：

检索我单元格列的类：

var cl=$(this).attr("class");
var col="."+/col\d/.exec(cl)[0];

检索当前div的父级var parent=$(this).parent();
创建一个包含当前colomn中的3个单元格的jQuery对象：
```
listOfCell=$(this);
listOfCell=listOfCell.add(parent.next().children(col));
listOfCell=listOfCell.add(parent.prev().children(col));
```
请注意，add函数返回一个新集合，因此我们需要指定返回值。
将3个下一个单元格添加到该对象listOfCell=listOfCell.add(listOfCell.next());
添加课程listOfCell.addClass("clickedCell");

结束了：）

这里有一个工作示例：http://jsfiddle.net/KZFzd/1/

请注意：

如前所述，该功能在很大程度上取决于所使用的标记。
该示例不处理以前选择的单元格的删除。这很容易，留给读者练习。
它不处理侧面单元格的特殊情况，它只是更改单元格的背景，如果网格更大则会更改单元格的背景。这个案例留给读者练习。
它不检查下一个/前一个父项的存在，因为jQuery在没有匹配时返回一个空的jQuery对象，因此，即使它没有效果，也可以在其上调用方法。
该示例可以通过多种方式进行压缩，但出于可读性目的而保留。

希望有所帮助。

修改为了回答您的评论，处理指定大小的新小提琴：http://jsfiddle.net/KZFzd/3/

我添加了两个输入，可以指定大小。您可能需要在代码:)中更改它。

我还添加了类删除来清理显示。

所以两个主要的变化是，现在，我们使用两个for循环来添加单元格。点击的单元格是矩形的左上角。

第一个：

for (i=1;i<y;i++){ listOfCell=listOfCell.add(par.children(col)); par=par.next(); }

它只是从一个父节点迭代到另一个父节点以达到所需的高度。（并且第一个父分配现在是下一个直接分配。par=$(this).parent().next()

第二个：

for (i=1;i<x;i++){ listOfCell=listOfCell.add(listOfCell.next()); }

只是迭代添加下一个元素以达到所需的宽度。

请注意：

我们正在使用宽度中jQuery列表中没有double的事实。

我们从1开始迭代而不是0，因为我们的起始listOfCell已经是1 * 1单元格

如果您在一个循环或/和另一个循环中将next()更改为prev()，则可以轻松地从其他角落开始。

它仍然不处理边案。

单击TD元素时，颜色2个单元格宽度和3个单元格高度

1 个答案: