Форум

ivro_uu · #1 (**permalink**) 01.04.2016, 13:21

Здравствуйте, обучаюсь в школе программировании: "Точка кода"
Соответственно я ещё новичек. только изучаю языки программирования и их особенности , не могу справиться с казалось бы с простейшей задачей:

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й пункт, кто знает как их решить, подскажите, что нужно и как нужно использовать, какие элементы кода нужны.
Спасибо.

ivro_uu · #2 (**permalink**) 01.04.2016, 14:09

Да, вы верно подметили, тем не менее, с помощью каких элементов нужно делать эти задания ?

Cuntmann · #3 (**permalink**) 01.04.2016, 16:50

<!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='&nbsp;';
}
}

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">&nbsp;</div>
<input type="text" id="txt" /><input type="button" value="Добавить" />
</center>
</body>
</html>

ivro_uu · #4 (**permalink**) 01.04.2016, 17:09

Офигеть ! - Вот что сразу пришло мне в голову, когда я открыл в браузере то что вы написали, я бы сам так не смог . Вам, наверное, это далось очень легко ?
Спасибо за содействие !

Alexizander · #5 (**permalink**) 03.04.2016, 10:29

Я тоже так подумал!

LDG64 · #6 (**permalink**) 26.07.2016, 09:47

Cuntmann - спасибо!

Сам я пока не могу написать такое

Никита(Слабоумие&Отвага) · #7 (**permalink**) 21.03.2018, 20:40

Я тоже там учусь. сделал иначе, но работает 1-н в 1-н. У меня это не засчитали

Форум

Справочник

Discord чат

Курсы javascript