Question

我知道标题看起来有点奇怪，但我正在尝试创建一个绘图应用程序。我有一个javascript生成的表是17乘36，我试图使它，所以无论何时你点击一个框，它将其颜色为黑色。下面是代码（这里它更奇怪，因为它们不是30 x 30像素）

＆＃13;

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 x = event.clientX;
	var y = event.clientY;
	console.log(x + " = x");
	console.log(y + " = y");
	console.log((x/30) + " = x/30");
	console.log((y/30) + " = y/30");
	x = Math.ceil(x / 30);
	y = Math.ceil(y / 30);
	if (x == 37) {x = 36}
	if (y == 18) {y = 17}
	console.log(x + "x after");
	console.log(y + "y after");
	document.getElementById(y.toString()).childNodes[x - 1].style.background = "black";
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Program</title>
		<style>
			body {
				margin: 0px;
			}
		</style>
	</head>
	<body>
		<script src="program.js"></script>
		<button onClick="calculate()"></button>
	</body>
</html>

＆＃13;

当我点击第10行中的方块时，它会将其着色为黑色。当我从第13行开始在靠近底部的行中单击它时，它会向上移动5个方格。此外，如果我点击一个正方形的后半部分（从左边或从顶部），它认为它是下一个正方形！请帮忙！

Answer 1

正如评论中已经提到的，你使这个问题比实际上更复杂。单击某个元素时，它会生成一个click事件，其中包含对该事件所针对的元素的引用。在您的情况下，它已经引用了您想要更改的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中检查它的样式即可。无需为此保留全局数组。如果您对可以使用的内容感到好奇，请使用console.log( node )，或者（更好）使用documentation on MDN。

如果出于其他原因需要阵列，可以使用node.parentNode和node.childNodes方法。请注意，最后一个方法返回NodeList;它看起来像一个数组，但它实际上不是一个数组。要在其上使用特定于数组的函数，我们将其转换为[].slice.call( NodeList )的数组。您可以使用[]代替Array.prototype。我不知道在某些浏览器中它是否会有任何不同的行为。

clientY没有显示正确的东西

1 个答案: