Помогите, пожалуйста, с табличкой

[stryker]

Итак, нужно, чтобы при клике ячейку она перекрашивалась в цвет№1.
При клике на другую ячейку она становится цветом№1, а предыдущая, которая изначально была цвета№1, станет белой.

Так вот не пойму, как прицепить функцию по онклик.
Спасибо.

<style type="text/css" rel="stylesheet">
td:hover {
	background:#39F;
}
</style>
<script type="text/javascript">
	function setColor(){
	this.style.background = "green"; // ---эта строка почему-то не закрашивает ячейку
	}
		
	var n=3;
	// Отрисовка таблицы
	document.write("<table border='1' style='border-collapse:collapse; width:400px; height:400px;'>");
	// Отрисовка рядов таблицы
	for (var tr=1; tr<=n; tr++)
	{
		document.write("<tr>");
			// Отрисовка столбцов в рядах таблицы
			for (var td=1; td<=n; td++)
			{
				document.write("<td align='center' valign='middle' onclick='setColor()' id='tdcolor'>" + "A" + "</td>");
			}
		document.write("</tr>");
	}
	document.write("</table>");
</script>

[Sweet]

Потому что в функции this ссылается на объект window, а не на ячейку.
Измени onclick на 'setColor(this)', а в функции сделай

function setColor(){
  arguments[0].style.background = "green";
}

[stryker]

Sweet,
спасибо. Осталось только сделать так, чтобы при последующем клике на ячейку предыдущая переставала быть зеленой.

[рони]

function setColor(a) {
    if (this.a && this.a != a) this.a.style.background = "";
    a.style.background = "green";
    this.a = a
};

[stryker]

ну и последний вопрос, если позволите.

<script type="text/javascript">
	function setColor(a) { 
		if (this.a && this.a != a) this.a.style.background = "white"; 
		a.style.background = "green"; 
		this.a = a;
		};

	function setColor2(b) {
		if (this.b && this.b != b) this.b.style.background = "white"; 
		b.style.background = "#39F"; 
		this.b = b;
		};

	var n=3;
	// Отрисовка таблицы
	document.write("<table border='1' style='border-collapse:collapse; width:400px; height:400px;'>");
	// Отрисовка рядов таблицы
	for (var tr=1; tr<=n; tr++)
	{
		document.write("<tr>");
			// Отрисовка столбцов в рядах таблицы
			for (var td=1; td<=n; td++)
			{
				document.write("<td align='center' onmouseover='setColor2(this)' valign='middle' onclick='setColor(this)' id='tdcolor'>" + "A" + "</td>");
			}
		document.write("</tr>");
	}
	document.write("</table>");
</script>

по onmouseover не совсем корректро работает закрашивание в зеленый цвет, который берется по onclick.
Если же делать через стили, а не через onmouseover, то цветом #39F закрашиваются при наведении не все ячейки.
Как быть?

[рони]

Если же делать через стили, а не через onmouseover, то цветом #39F закрашиваются при наведении не все ячейки

это как? может просто обьяснишь чего хочешь в целом )))

[stryker]

со стилями изначально было так: <style type="text/css" rel="stylesheet">
td:hover {
background:#39F;
}
потом шел код js.

А хочется без стилей через onmouseover.

[рони]

stryker,
а зачем стиль скриптом заменять?

[stryker]

да не по собственной воле-то
пример работы стилей тут: http://195.225.172.165/

и здесь видно, что если какая-то ячейка уже была кликнута, то в последующем на ней этот стиль не срабатывает.
Иначе говоря, если я по всем ячейкам таблицы прокликаю, то голубой подсветки на ячейках я уже не увижу.

[рони]

<script type="text/javascript">
	function setColor(a) {
    if (this.a && this.a != a) this.a.style.background = "white";
    a.style.background = "green";
    this.a = a
}
function setColor2(a) {
    a.style.background = "#39F"
}
function setColor3(a) {
    a.style.background = a != this.a ? "white" : "green"
};
var n = 3;
document.write("<table border='1' style='border-collapse:collapse; width:400px; height:400px;'>");
for (var tr = 1; tr <= n; tr++) {
    document.write("<tr>");
    for (var td = 1; td <= n; td++) {
    document.write("<td align='center' onmouseout='setColor3(this)' onmouseover='setColor2(this)' valign='middle' onclick='setColor(this)' id='tdcolor'>A</td>")};
    document.write("</tr>")
}
document.write("</table>");
</script>