-1

我有一个使用图像中的 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 代码最小化将是完美的。但我还需要在网页上用生成的图像做更多的事情：

  • 在操作时（例如鼠标按下某个单元格），我需要识别单元格的颜色。
  • 在此之后，检查 celected 单元格前后的行是否具有相同的 RGB 颜色。
  • 之后，根据所选单元格的颜色计算一个颜色单元格，并在上方给出工具提示。

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

也许有一些像 JQuery 这样的 javascript 库具有我需要的功能？

4

1 回答 1

0

这里有一个小 POJS 可以帮助您入门。

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 上

于 2013-06-27T12:42:27.720 回答