2015-09-15 94 views
2

我知道標題看起來有點奇怪,但我試圖創建一個繪圖應用程序。我有一個由36生成的JavaScript生成的表格,我試圖做到這一點,只要你點擊一個盒子,它就會將它染成黑色。下面是代碼(在這裏,因爲他們是30×30像素不是它的行爲怪異)clientY不顯示正確的東西

var array = []; 
 
var body = document.body, tbl = document.createElement("table"); 
 
tbl.style.border = "1px solid black"; 
 
tbl.style.borderCollapse = "collapse"; 
 
tbl.setAttribute("border", "1px"); 
 
tbl.style.margin = "0px"; 
 
tbl.setAttribute("onClick", "color(event)"); 
 
var id = 1; 
 
for (var j = 0; j < 17; j++) { 
 
\t var row = tbl.insertRow(); 
 
\t row.setAttribute("id", id.toString()); 
 
\t id++; 
 
\t for (var ij = 0; ij < 36; ij++) { 
 
\t \t var cell = row.insertCell(); 
 
\t \t cell.style.width = "28px"; 
 
\t \t cell.style.height = "28px"; 
 
\t } 
 
} 
 
body.appendChild(tbl); 
 

 

 
function color(event) { 
 
\t var x = event.clientX; 
 
\t var y = event.clientY; 
 
\t console.log(x + " = x"); 
 
\t console.log(y + " = y"); 
 
\t console.log((x/30) + " = x/30"); 
 
\t console.log((y/30) + " = y/30"); 
 
\t x = Math.ceil(x/30); 
 
\t y = Math.ceil(y/30); 
 
\t if (x == 37) {x = 36} 
 
\t if (y == 18) {y = 17} 
 
\t console.log(x + "x after"); 
 
\t console.log(y + "y after"); 
 
\t document.getElementById(y.toString()).childNodes[x - 1].style.background = "black"; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>Program</title> 
 
\t \t <style> 
 
\t \t \t body { 
 
\t \t \t \t margin: 0px; 
 
\t \t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t \t <script src="program.js"></script> 
 
\t \t <button onClick="calculate()"></button> 
 
\t </body> 
 
</html>

當我第10行中單擊一個正方形,它的顏色是黑色。當我在靠近底部的一排點擊它時,從第13行開始,它向上移動5格。另外,如果我點擊一個廣場的後半部分(從左側或從頂部),它認爲它是下一個廣場!請幫忙!

+0

嘗試event.pageX && event.pageY – Eric

+2

事件對象將包含一個鏈接到被單擊的TD,您不需要搜索它。如果要搜索,請在計算偏移量時介意單元格的填充,邊框和間距... – dandavis

+0

另外,您沒有設置表格的大小,是否沒有注意到「像素」不是真的廣場?而且表格不是從頁面頂部開始的,在它之前有一個複選框。所以你需要從你的計算中減去表格的位置。 – Jan

回答

2

正如已經在評論中提到的那樣,您正在使這個問題比實際情況更加複雜。當您單擊某個元素時,它會生成一個單擊事件,其中包含對該事件所針對的元素的引用。在你的情況下,它已經引用了你想改變的td元素。

所以:只需使用event.target,你很好去。

/* Creating the table */ 
 
var array = []; 
 
var body = document.body, 
 
    tbl = document.createElement("table"); 
 
tbl.style.border = "1px solid black"; 
 
tbl.style.borderCollapse = "collapse"; 
 
tbl.setAttribute("border", "1px"); 
 
tbl.style.margin = "0px"; 
 
tbl.setAttribute("onClick", "color(event)"); 
 
var id = 1; 
 
for (var j = 0; j < 17; j++) { 
 
    var row = tbl.insertRow(); 
 
    row.setAttribute("id", id.toString()); 
 
    id++; 
 
    for (var ij = 0; ij < 36; ij++) { 
 
    var cell = row.insertCell(); 
 
    cell.style.width = "28px"; 
 
    cell.style.height = "28px"; 
 
    } 
 
} 
 
body.appendChild(tbl); 
 

 

 
function color(event) { 
 

 
    var node = event.target; 
 
    var parent = node.parentNode; 
 

 
    //Probably a tbody, but we don't care as long as it is the parent 
 
    var table = parent.parentNode; 
 

 
    var column = [].slice.call(parent.childNodes).indexOf(node); 
 
    var row = [].slice.call(table.childNodes).indexOf(parent); 
 

 
    console.log(column); 
 
    console.log(row); 
 

 
    node.style.background = "black"; 
 
}

編輯:既然你問如何更新陣列,我會在這個擴展位。你有一個DOM的參考。如果您需要跟蹤特定項目是否爲黑色,則可以在DOM中簡單檢查它的樣式。無需爲此保留一個全局數組。如果你對你有什麼可用,或者(更好)使用documentation on MDN,請使用console.log(node)

如果您需要陣列的原因不同,可以使用node.parentNodenode.childNodes方法。請注意,最後一種方法返回NodeList;它看起來像一個數組,但它實際上不是一個數組。爲了使用特定於數組的特定函數,我們將它轉​​換爲一個數組,其中[].slice.call(NodeList)。您可以使用Array.prototype而不是[]。我無法確定它在某些瀏覽器中的行爲是否有所不同。

+0

但我按了哪一個?就像,我也想記錄下它是在612的一個黑色方塊是1而不是0的數組中按下的,但我該如何找到我壓出的那個? – zevee

+0

我已經用一些解釋更新了答案。我會推薦閱讀你使用的東西的文檔,以瞭解你可以使用的東西。 – Sumurai8