как сделать, чтобы при нажатии на кнопку появлялась таблица, заданная мною, чтобы в полях таблицы можно было ввести информацию а потом сохранить ее

@Tema777 · Регистрация: 20.07.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте! Подскажите, вот у меня есть веб-страница и код в ней. Если открыть в браузере, то сам будет кнопка, при помощи которой, нажав, появляется окно. Вопросы:
Как сделать так, чтобы, когда появлялось окно, при дальнейшем обновлении страницы, оно оставалось на месте?
Как сделать так, чтобы, в окне появлялась заданная мною таблица, в которую можно что-то ввести и потом сохранить этот блок на странице при помощи другой кнопки?
Спасибо. Надеюсь, кто-нибудь да поможет =)

Вот код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<link href="3vs360/Menu/css for menu.css" rel="stylesheet" type="text/css" />
<style>
#a_demo_four {
    background-color:#3bb3e0;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    float:right;
    margin-right: 100px;
    margin-top: 300px;
    position: relative;
    padding:10px 20px;
    padding-right:50px;
    background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(44,160,202)),
    color-stop(1, rgb(62,184,229))
    );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 1px 0px #3caa3c, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -moz-box-shadow: inset 0px 1px 0px #3caa3c, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    -o-box-shadow: inset 0px 1px 0px #3caa3c, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
    box-shadow: inset 0px 1px 0px #3caa3c, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}
 
#a_demo_four:active {
    top:3px;
    background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
    background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(62,184,229)),
    color-stop(1, rgb(44,160,202))
    );
    -webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    -o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
    box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}
 
#a_demo_four::before {
    background-color:#3caa3c;
    background-image: url(cps.com/%D0%BF%D0%BB%D1%8E%D1%81.png);
    background-repeat:no-repeat;
    background-position:center center;
    content:"";
    width:20px;
    height:20px;
    position:absolute;
    right:15px;
    top:50%;
    margin-top:-9px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    -moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    -o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
    box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}
 
#a_demo_four:active::before {
    top:50%;
    margin-top:-12px;
    -webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    -moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    -o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
    box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}
 
#adv {width: 1000px;
height: 270px;
float: right;
border: 15px solid #000;
opacity:0.2;}
 
 
</style>
 
</head>
 
<body>
 <p>
  
                            
                        
 <form>
          <a href="#" class="a_demo_four">        <div id="a_demo_four" onclick="newInf();"></a>Кнопка </div>
 
                    </p>
                    </form>
                    <div id="newEl">
<script type="text/javascript">
function newInf(){
var el, s;
el=document.getElementById("newEl");
s=el.innerHTML;
s=s+'<input id="adv" onclick="clik();">';
el.innerHTML=s;
 
 };
</script>
 
</div></div>
 
</body>
</html>

@Schtrich · 22.07.2013, 21:26

Вот это неправильно в соотв. с правилами валидации

HTML5
1
2
3
4
<p>
<form>
<a href="#" class="a_demo_four"> <div id="a_demo_four" onclick="newInf();"></a>Кнопка </div>
</p></form>

Должно быть по крайней мере так:

HTML5
1
2
3
4
5
6
7
<form>
<p>
<a href="#" class="a_demo_four"> 
     <div id="a_demo_four" onclick="newInf();">Кнопка </div>
</a>
</p>
</form>

p.s. не мешало сам топик отредактировать...

С вашей кнопкой наверное с кукисами или с сессиями лучше работать.

@Tema777 · 22.07.2013, 21:29 **[ТС]**

Schtrich, не подскажите, куда лучше обратится, а то мне очень надо))

@Schtrich · 22.07.2013, 21:43

Сообщение от Tema777

не подскажите, куда лучше обратится, а то мне очень надо))

Вы и так уже обратились на форум за помощью.

Где вы тут увидели ваше окно? http://jsfiddle.net/Stasonix/H6jL2/

Добавлено через 12 минут
Вообще модальных окон уйма, начиная с LightBox и jQuery UI ModalBox и продолжая этим http://www.jquery4u.com/window... log-boxes/

@Tema777 · 22.07.2013, 21:44 **[ТС]**

Schtrich, у меня в dreamweaver появляется.
так, в скрипте указал: <input id="adv" onclick="clik();">
и в css "adv" тоже есть.
аааааааа, все ,вспомнил, извиняюсь, там еще в html должно быть вот это <div id="newEl"></div>

это div, в котором должно появлятся это окно, его можно вставить в любом месте в код.

@Schtrich · 22.07.2013, 21:47

да, я в фиддле не добавил, ну это все равно ситуации не меняет, смотрите нет ли ошибок в консоле браузера.

@Tema777 · 22.07.2013, 22:19 **[ТС]**

Schtrich, Извините, не понял

Добавлено через 1 минуту
Schtrich, кстати, наоборот, <div id="newEl"></div> - это меняет все, я у себя в коде убрал, кнопка не действует, потом поставил, блок появился при нажатии

Добавлено через 13 минут
Schtrich, по поводу моих вопросов, сможешь помочь??

@Schtrich · 22.07.2013, 23:43

Выложите сюда содержимое стиля:

HTML5
1
<link href="3vs360/Menu/css for menu.css" rel="stylesheet" type="text/css" />

@Tema777 · 23.07.2013, 20:01 **[ТС]**

Schtrich, это сделаю, вы мне по моим вопросам сможете помочь?

@Schtrich · 24.07.2013, 09:12

Tema777, чтобы вам помочь нужно смоделировать ситуацию, либо сделайте это сами на фиддле, либо делайте то что я вас прошу.

@Tema777 · 27.07.2013, 12:59 **[ТС]**

Schtrich, просто я когда кидаю в другой файл стили в dreamweaver, у меня все стили летят. а так нельзя?

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Tema777 0 / 0 / 0 Регистрация: 20.07.2013 Сообщений: 6
	22.07.2013, 21:29 [ТС]
	Schtrich, не подскажите, куда лучше обратится, а то мне очень надо)) 0

@Tema777 0 / 0 / 0 Регистрация: 20.07.2013 Сообщений: 6
	22.07.2013, 21:44 [ТС]
	Schtrich, у меня в dreamweaver появляется. так, в скрипте указал: <input id="adv" onclick="clik();"> и в css "adv" тоже есть. аааааааа, все ,вспомнил, извиняюсь, там еще в html должно быть вот это <div id="newEl"></div> это div, в котором должно появлятся это окно, его можно вставить в любом месте в код. 0

@Schtrich weboman 210 / 195 / 63 Регистрация: 13.08.2010 Сообщений: 1,531 Записей в блоге: 6
	22.07.2013, 21:47
	да, я в фиддле не добавил, ну это все равно ситуации не меняет, смотрите нет ли ошибок в консоле браузера. 0

@Tema777 0 / 0 / 0 Регистрация: 20.07.2013 Сообщений: 6
	22.07.2013, 22:19 [ТС]
	Schtrich, Извините, не понял Добавлено через 1 минуту Schtrich, кстати, наоборот, <div id="newEl"></div> - это меняет все, я у себя в коде убрал, кнопка не действует, потом поставил, блок появился при нажатии Добавлено через 13 минут Schtrich, по поводу моих вопросов, сможешь помочь?? 0

@Tema777 0 / 0 / 0 Регистрация: 20.07.2013 Сообщений: 6
	23.07.2013, 20:01 [ТС]
	Schtrich, это сделаю, вы мне по моим вопросам сможете помочь? 0

@Schtrich weboman 210 / 195 / 63 Регистрация: 13.08.2010 Сообщений: 1,531 Записей в блоге: 6
	24.07.2013, 09:12
	Tema777, чтобы вам помочь нужно смоделировать ситуацию, либо сделайте это сами на фиддле, либо делайте то что я вас прошу. 0

@Tema777 0 / 0 / 0 Регистрация: 20.07.2013 Сообщений: 6
	27.07.2013, 12:59 [ТС]
	Schtrich, просто я когда кидаю в другой файл стили в dreamweaver, у меня все стили летят. а так нельзя? 0