Помогите, пожалуйста, с табличкой
Итак, нужно, чтобы при клике ячейку она перекрашивалась в цвет№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>
|
Потому что в функции this ссылается на объект window, а не на ячейку.
Измени onclick на 'setColor(this)', а в функции сделай
function setColor(){
arguments[0].style.background = "green";
}
|
Sweet,
спасибо. Осталось только сделать так, чтобы при последующем клике на ячейку предыдущая переставала быть зеленой. |
function setColor(a) {
if (this.a && this.a != a) this.a.style.background = "";
a.style.background = "green";
this.a = a
};
|
ну и последний вопрос, если позволите.
<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 закрашиваются при наведении не все ячейки. Как быть? |
Цитата:
|
:)
со стилями изначально было так: <style type="text/css" rel="stylesheet"> td:hover { background:#39F; } потом шел код js. А хочется без стилей через onmouseover. |
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>
|
| Часовой пояс GMT +3, время: 22:55. |