Сообщение от рони
|
теже два цикла плюс нелюбовь к var и ограничение: не более 9 элементов )))
вот вам ещё вариант через замыкание, чтоб не доставать данные из id (количество строк любое наличие id необязательно)
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
<div>13</div>
<div>14</div>
<div>15</div>
<script>
var d = document.querySelectorAll("div"),
f = function(a) {
return function() {
[].forEach.call(d, function(b, c) {
b.style.background = a >= c ? "blue" : ""
})
}
};
[].forEach.call(d, function(a, b) {
a.onclick = f(b)
});
</script>
</body>
</html>
|
Сейчас буду разбирать=) Спасибо.
В итоге у меня вышло вот так
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
header{
width: 225px;
height: 17px;
border: 1px solid black;
}
header>div{width: 13px;
height: 15px;
border:1px solid black;
background-color:white;
margin-left:0px;
float:left;
}
</style>
<script>
function test() {
var divs;
for (var j = 0; j < 15; j++) {
divs = document.getElementById('a' + j);
divs.onclick = function() {
var color = "linear-gradient(to right, blue, blue)"
for (var j = 0; j < 15; j++) {
divs = document.getElementById('a' + j);
divs.style.backgroundImage = divs == this ? "linear-gradient(to right, blue 50%, white 50%)" : color;
if (divs == this) color = '';
}
}
}
}
</script>
</head>
<body onload="test()">
<header>
<div id="a0">10</div>
<div id="a1">11</div>
<div id="a2">12</div>
<div id="a3">13</div>
<div id="a4">14</div>
<div id="a5">15</div>
<div id="a6">16</div>
<div id="a7">17</div>
<div id="a8">18</div>
<div id="a9">19</div>
<div id="a10">20</div>
<div id="a11">21</div>
<div id="a12">22</div>
<div id="a13">23</div>
<div id="a14">24</div>
</header>
</body>
</html>
Теперь думаю как вынести текст из div'ов над ними и по клику на текст красилась ячейка