Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 01.04.2016, 13:21
Новичок на форуме
Отправить личное сообщение для ivro_uu Посмотреть профиль Найти все сообщения от ivro_uu
 
Регистрация: 01.04.2016
Сообщений: 3

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

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й пункт, кто знает как их решить, подскажите, что нужно и как нужно использовать, какие элементы кода нужны.
Спасибо.
Вложения:
Тип файла: txt Домашнее задание.txt (1.2 Кб, 37 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 01.04.2016, 13:42
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

ivro_uu, пункт 2 неправильно сделали там имелось ввиду исчезание ячейки "возвращало бы скрытую ячейку", а не всей таблицы
Ответить с цитированием
  #3 (permalink)  
Старый 01.04.2016, 14:09
Новичок на форуме
Отправить личное сообщение для ivro_uu Посмотреть профиль Найти все сообщения от ivro_uu
 
Регистрация: 01.04.2016
Сообщений: 3

Да, вы верно подметили, тем не менее, с помощью каких элементов нужно делать эти задания ?
Ответить с цитированием
  #4 (permalink)  
Старый 01.04.2016, 16:50
Аватар для Cuntmann
Аспирант
Отправить личное сообщение для Cuntmann Посмотреть профиль Найти все сообщения от Cuntmann
 
Регистрация: 26.01.2014
Сообщений: 78

<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 01.04.2016, 17:09
Новичок на форуме
Отправить личное сообщение для ivro_uu Посмотреть профиль Найти все сообщения от ivro_uu
 
Регистрация: 01.04.2016
Сообщений: 3

Офигеть ! - Вот что сразу пришло мне в голову, когда я открыл в браузере то что вы написали, я бы сам так не смог . Вам, наверное, это далось очень легко ?
Спасибо за содействие !
Ответить с цитированием
  #6 (permalink)  
Старый 03.04.2016, 10:29
Новичок на форуме
Отправить личное сообщение для Alexizander Посмотреть профиль Найти все сообщения от Alexizander
 
Регистрация: 03.04.2016
Сообщений: 2

Я тоже так подумал!
Ответить с цитированием
  #7 (permalink)  
Старый 26.07.2016, 09:47
Новичок на форуме
Отправить личное сообщение для LDG64 Посмотреть профиль Найти все сообщения от LDG64
 
Регистрация: 26.07.2016
Сообщений: 1

Спасибо за помощь
Cuntmann - спасибо!

Сам я пока не могу написать такое
Ответить с цитированием
  #8 (permalink)  
Старый 21.03.2018, 20:40
Новичок на форуме
Отправить личное сообщение для Никита(Слабоумие&Отвага) Посмотреть профиль Найти все сообщения от Никита(Слабоумие&Отвага)
 
Регистрация: 21.03.2018
Сообщений: 1

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно Переписать код на NODE.JS koshak01 Node.JS 0 28.01.2016 12:11
Нужно сделать скрипт для Ucoz stanley-kr Работа 0 08.05.2015 06:00
Прошу помочь в решении задачи на JavaScrip alex01rus1991 Общие вопросы Javascript 4 27.11.2012 21:50
Прошу помочь в решении задачи на JavaScrip alex01rus1991 Элементы интерфейса 0 24.11.2012 19:53
нужно создать много копий div ASM29A Элементы интерфейса 3 27.03.2010 20:22