<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Домашнее задание шестой урок</title>
<style>
div {
border:1px solid black;
background-color:green;
color:#fff;
box-shadow:10px 10px 10px green;
width:30%;
padding:10px;
}
table,div{
margin-top:20px;
margin-bottom:20px;
}
td{
text-align:center;
}
input{
cursor:pointer;
text-align:center;
}
input[value="Добавить"]{
margin-left:10px;
}
</style>
<script>
/*
1. Нарисовать две таблицы 3х3, одну под другой. В нижней таблице заполнить все 9
ячеек произвольным содержимым (текст, картинки - все равно), а в верхней - в каждой
из девяти ячеек расположить кнопку (<input type=button...>).
2. Написать на Javascript реакцию на клик мышкой по любой ячейке нижней таблицы,
так чтобы при клике на ячейку она становилась невидимой (свойство стиля display = none),
а нажатие соответствующей кнопки в ячейку верхней таблицы возвращало бы скрытую ячейку
в нижней таблице назад.
3. Под нижней таблицей расположить элемент DIV. Оформить его так, чтобы у него была
видка рамка вокруг него, тень и не белый фон.
4. Добавить в ячейки нижней таблицы реакцию на наведение курсора мышки на ячейку
(событие onMouseOver - по аналогии со знакомым нам onClick), чтобы при срабатывании
этого события содержимое этой ячейки (свойство innerHTML) копировалось бы в элемент
DIV, созданный в п.3.
5. Добавить под элементом DIV из п.3 поле для текстового ввода (<input type=text...>)
и кнопку рядом с ней. Написать реакцию на нажатие этой кнопки так, чтобы набранный в
поле для ввода текста на момент нажатия текст "приклеевался" бы к содержимому левой
верхней ячейки нижней таблицы. (Например: в ячейке написано "Some text" и размещена
картинка ("Some text<картинка>"). Мы набираем в поле для ввода текста "More text" и
нажимаем на кнопку. В результате содержимое левой верхней ячейки меняется на "Some
text<картинка>More text").
*/
window.onload=function(){
var btnz=document.querySelectorAll('#t1 input'),
celz=document.querySelectorAll('#t2 td'),
k=0;
for(var i=0; i < celz.length; i++){
celz[i].onclick=function(){this.style.display='none';}
celz[i].onmouseover=function(){
document.getElementById('div').innerHTML=this.innerHTML;
}
celz[i].onmouseout=function(){
document.getElementById('div').innerHTML=' ';
}
}
for(; k < btnz.length; k++){
btnz[k].attributes['data-cell']=k;
btnz[k].onclick=function(){
celz[this.attributes['data-cell']].style.display='table-cell';
}
}
document.querySelector('[value="Добавить"]').onclick=function(){
var val=this.previousSibling.value;
if(val){
celz[0].innerHTML+='<br />'+val;
}
}
}
</script>
</head>
<body>
<center>
<table id="t1" width="50%" border="1" cellpadding="5" cellspacing="5">
<tr>
<td><input type="button" value="check" /></td>
<td><input type="button" value="check" /></td>
<td><input type="button" value="check" /></td>
</tr>
<tr>
<td><input type="button" value="check" /></td>
<td><input type="button" value="check" /></td>
<td><input type="button" value="check" /></td>
</tr>
<tr>
<td><input type="button" value="check" /></td>
<td><input type="button" value="check" /></td>
<td><input type="button" value="check" /></td>
</tr>
</table>
<table id="t2" width="50%" border="1" cellpadding="5" cellspacing="5">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<div id="div"> </div>
<input type="text" id="txt" /><input type="button" value="Добавить" />
</center>
</body>
</html>