Нужно помочь в решении задания
Вложений: 1
Здравствуйте, обучаюсь в школе программировании: "Точка кода"
Соответственно я ещё новичек. только изучаю языки программирования и их особенности , не могу справиться с казалось бы с простейшей задачей: 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"). Проблемы имеются с третьего по 5й пункт, кто знает как их решить, подскажите, что нужно и как нужно использовать, какие элементы кода нужны. Спасибо. |
Да, вы верно подметили, тем не менее, с помощью каких элементов нужно делать эти задания ?
|
<!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>
|
Офигеть ! - Вот что сразу пришло мне в голову, когда я открыл в браузере то что вы написали, я бы сам так не смог . Вам, наверное, это далось очень легко ?
Спасибо за содействие ! |
Я тоже так подумал!
|
Спасибо за помощь
Cuntmann - спасибо!
Сам я пока не могу написать такое :) |
Это сработало?
Я тоже там учусь. сделал иначе, но работает 1-н в 1-н. У меня это не засчитали
|
| Часовой пояс GMT +3, время: 09:46. |