| |
 689 байт |
|
| | Добрый день Уважаемые! У меня вопрос по DOM.
На странице есть выпадающее меню, в котором расположены ячейки. Как сделать, что бы при нажатии на ячейку из 5 строки и 5 столбца, ячейки от 1 до 5 строки и от 1 до 5 столбца изменили свой стиль(К примеру цвет). Со слов не понятно, но посмотрите и все поймете, файл css прикрепил.
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>
<head>
<link rel="shortcut icon" href=".ico">
<link rel='stylesheet' href='stylebasic17.css'>
<script language="JavaScript">
function colstr(viz_tbl){
var c1 = viz_tbl.indexOf('c');
var col=0;
for(var i1=0; i1<c1; i1++){
col = col+''+viz_tbl.charAt(i1);
}
col = Number(col); //получаем кол-во строк
return col;
}
function rowstr(viz_tbl){
var c1 = viz_tbl.indexOf('c');
var r2 = viz_tbl.indexOf('r');
var row=0;
for(var i2=c1+1; i2<r2; i2++){
row = row+''+viz_tbl.charAt(i2);
}
row = Number(row); //получаем кол-во столбцов
return row;
}
window.onclick = function (msover) {
var evt = msover || window.event;
var trg = evt.target || evt.srcElement;
if('siz' == trg.getAttribute('class')){
var viz_tbl = trg.getAttribute('name');
//функция возвращает кол-во строк нажатого эл-та
var col = colstr(viz_tbl);
//функция возвращает кол-во столбцов нажатого эл-та
var row = rowstr(viz_tbl);
//** Здесь **
//получается закрасить 6 узел, а надо все узлы, до нажатого
//получаем родителя нажатого эл-та
var LI = trg.parentNode;
for(var y=1; y<LI.childNodes.length; y++){
//arr[y] = LI.childNodes[y].getAttribute('name');
}
LI.childNodes[6].style.backgroundColor="LIGHTGREEN";
trg.style.backgroundColor="GREEN";
}
}
</script>
</head>
<body>
<ul>
<li id="li">
<div id="tbl_n_n_txt" name="name_">Таблица </div>
<script language="JavaScript">
//* создаем выпадающее поле выбора размера таблицы *//
var arr_name=[];
var K=0;
for(var i=1; i<=15; i++){
for(var j=1; j<=15; j++){
var d = document.createElement('div');
d.setAttribute('class','siz');
//устанавливаем узлам атрибут name = (от 1c1r до 15c15r)
d.setAttribute('name',i+'c'+j+'r');
arr_name[K] = i+'c'+j+'r';
document.getElementById('li').appendChild(d);
K++;
}
}
</script>
</li>
</ul>
</body></html>
|
| |
| |
|
