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

@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, у меня все стили летят. а так нельзя?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .

@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