Question

我有一张表格是使用图片中的javascript生成的。表的大小取决于图像的大小。它读取rgb中的像素颜色。然后将每个像素转换为单元格。（我有这样的表格作为例子）：

  <table height="100" width="100">
    <tbody>
    <tr>
    <td style="background-color: rgb(121,117,92);"></td>
    <td style="background-color: rgb(121,117,92);"></td>
    <td style="background-color: rgb(121,117,92);"></td>
    <td style="background-color: rgb(121,117,92);"></td>
    <td style="background-color: rgb(127,129,116);"></td>
    <td style="background-color: rgb(127,129,116);"></td>
    </tr>

    <tr>
    <td style="background-color: rgb(121,117,92);"></td>
    <td style="background-color: rgb(121,117,92);"></td>
    <td style="background-color: rgb(121,117,92);"></td>
    <td style="background-color: rgb(127,129,116);"></td>
    <td style="background-color: rgb(127,129,116);"></td>
    <td style="background-color: rgb(127,129,116);"></td>
    </tr>

    </tbody>
</table>

根据它的大小，最小化html代码是完美的。但是我需要在生成图像的网页上做更多的事情：

在动作上（例如鼠标按在某个单元格上），我需要识别单元格的颜色。
在此之后，检查相同RGB颜色的选定单元格之前和之后的行。
在此之后，根据所选单元格的颜色计算一个颜色单元格，并在上面提供工具提示。

简单地说：按下单元格 - 检查颜色 - 在一行中检查它附近的相同单元格 - 计算它们 - 给工具提示提供单元格数。

也许有一些javascript库，比如JQuery，我需要哪些功能？

Answer 1

这是一个帮助您入门的小POJ。

的Javascript

function clickedCell(e) {
    var target = e.target,
        previous,
        next,
        styleTarget,
        stylePrevious,
        styleNext;

    if (target.tagName.toUpperCase() === "TD") {
        styleTarget = window.getComputedStyle(target);
        console.log("clicked td color", styleTarget.backgroundColor);

        previous = target.previousElementSibling;
        if (previous && previous.tagName.toUpperCase() === "TD") {
            stylePrevious = window.getComputedStyle(previous);
            console.log("previous td color", stylePrevious.backgroundColor);
        } else {
            console.log("no previous td");
        }

        next = target.nextElementSibling;
        if (next && next.tagName.toUpperCase() === "TD") {
            styleNext = window.getComputedStyle(next);
            console.log("next td color", styleNext.backgroundColor);
        } else {
            console.log("no next td");
        }
    }
}

document.addEventListener("click", clickedCell, false);

在jsfiddle

上

JavaScript - 在html表的一行中计算相同的颜色单元格

1 个答案: