Помогите, пожалуйста, с табличкой
Итак, нужно, чтобы при клике ячейку она перекрашивалась в цвет№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>
|
рони,
ай, спасибо за помощь. Для себя некоторые моменты прояснились :) Премного благодарен ;) |
Цитата:
По теме: что за this.a??? Это чтобы запутать? Если уж захотелось залезть в глобальную область, то чего ж стесняться, так бы и писал: window.a. Хотя это вроде как не принято (не самый хороший тон во всяком случае). Можно было бы хранить предыдущую ячейку в функции. Например, так:
function setColor(){
if (!arguments.callee.a) arguments.callee.a = arguments[0]
else arguments.callee.a.style.background = "white";
arguments[0].style.background = "green";
arguments.callee.a = arguments[0];
}
А лучше через замыкания:
var setColor = (function(){
var storage
return function(){
var element = arguments[0]
if (storage && storage != element) storage.style.background = "white";
element.style.background = "green";
storage = element
}
}());
|
Предлагаю следующую реализацию (все в одной функции):
<script type="text/javascript">
var superF = (function(){
var storage;
return function(){
var event = arguments[0] || window.event
switch(event.type){
case 'click':
if (storage && storage != this) storage.style.background = "white";
this.style.background = "green";
storage = this;
break;
case 'mouseout':
if (storage != this) this.style.background = "white";
break;
case 'mouseover':
if (storage != this) this.style.background = "#39F";
break;
};
};
}());
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='superF.call(this)' onmouseout='superF.call(this)' onmouseover='superF.call(this)' id='tdcolor'>A</td>")};
document.write("</tr>")
}
document.write("</table>");
</script>
UPD: подправил передачу события |
спасибо-спасибо за ответы :)
|
| Часовой пояс GMT +3, время: 05:30. |