JavaScript - 在html表格的一行中計數相同的顏色單元格

-1

我有一張表格，它是使用圖像中的javascript生成的。表格的大小取決於圖像的大小。它讀取rgb中的像素顏色。然後將每個像素轉換爲單元格。（我有這樣的表作爲一個例子）：JavaScript - 在html表格的一行中計數相同的顏色單元格

<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與我需要的功能？

來源

2013-06-27 user2527811

這一切是可能的，而且很容易與jQuery。你需要付出一些努力來實現它，如果你有問題，那麼我們會幫助你。 – Barmar

好的 - 我明白了 - 這是我的第一個問題，對不起。 – user2527811

這是一個小小的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-27 12:42:27 Xotic750

JavaScript - 在html表格的一行中計數相同的顏色單元格

回答

相關問題