ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / редактировать строчку в таблице при помощи диалогового окна
14 сообщений из 14, страница 1 из 1
редактировать строчку в таблице при помощи диалогового окна
    #38372648
vanuna
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vanuna
Участник
У меня есть таблица
Код: javascript
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.
  
            <div>                                                            
                            <table class="table" id="table-visual-features">
                                <thead>
                                    <tr>
                                        <th>Visual Feature</th>
                                        <th>Type [currently not used]</th>
                                        <th>Description</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                                             
                               
                                    <tr>
                                        <td>r</td>
                                        <td>Numeric</td>
                                        <td>Values to be mapped to the radius</td>
                                        <td>
                                            <button class="btn1 action-change"></button>
                                            <button class="btn1 action-add-feature"></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>


каждая строчка заканчивается двумя кномками изменить и добавить
У меня вопрос, как сделать изменение строчки в таблице: после нажатия на кнопку должен сработать action-change, который откроет диалоговое окно с параметрами табличкой строчки, сюда можно будет вносить изменения, после чего окно закрывается и мы видим, что строчка в таблице изменилась.

подскажите, как это можно реализовать??
Предполагаю, что все надо прописать в
Код: javascript
1.
2.
3.
4.
5.
6.
    <script type="text/javascript">
                            $(document).ready(function() {
                                $('.action-change').on('click', function() {
                                    ??????????????
                                });
                        </script>


не судите строго, третий день за javascript.
...
Рейтинг: 0 / 0
21.08.2013, 02:47
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38372700
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vanunaкак это можно реализовать?
Как вариант...
- Показать ДИВ с формой
- Заполнить поля
- Проверить поля
- Нажать на кнопку "Записать"
- Записать поля в строчку таблицы
...
Рейтинг: 0 / 0
21.08.2013, 08:43
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38372964
vanuna
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vanuna
Участник
форму сделал.
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<form action="#" name="change-form">
  <table>
    <tr>
      <p>
        <label for="user-name">Visual Feature</label><input></input>
      </p>  
      <p>
        <label for="user-name"> Type</label><input></input>
      </p>  
       <p>
        <label for="user-name"> Description</label> <input></input>
      </p>  
     
    </tr>
  </table>
</form>



как ее показать?
...
Рейтинг: 0 / 0
21.08.2013, 11:32
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38372972
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
http://jqueryui.com/dialog/
...
Рейтинг: 0 / 0
21.08.2013, 11:35
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38372994
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
 
Простой пример
Код: html
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.
<!DOCTYPE html>
<html>
<head>
<title>Модальное окно</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
#over{
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: grey;
  opacity:0.5;
  filter:alpha(opacity=50);
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
 }
#wnd{
  z-index: 1001;
  width: 300px;
  height: 150px;
  background-color: #6699CC;
  border: 1px solid #0000FF;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -100px;
  padding: 5px;
  display: none;
  text-align:center;
}
</style>

<script type='text/javascript'>
function show(id) {document.getElementById('over').style.display = 'block'; document.getElementById(id).style.display = 'block';}
function hide(id) {document.getElementById('over').style.display = 'none'; document.getElementById(id).style.display = 'none';}
</script>
</head>

<body>
Здесь минимум CSS, JS <br>
<button onclick="show('wnd');">Показать окно</button>

<div id="over" onmousedown="return false;"></div>

<div id="wnd">
	Модальное окно!<br/>Строка 2<br>
	<button onclick="hide('wnd');" style="position:absolute; left:115px; bottom:2px; width:80px;">Закрыть</button>
</div>

</body>
</html>

...
Рейтинг: 0 / 0
21.08.2013, 11:45
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38373214
vanuna
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vanuna
Участник
user89,

кажется получается, спасибо.

итак, у меня
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<div id="dialog_change_feature">

    <h1>Change of features </h1>
    
       <div class="modal-body">
           <table>                                        
                                        <p> X <input name="data_x" data-feature="x"></input></p>
                                        <p> Y <input name="data_y" data-feature="x"></input></p>
                                        <p> Z <input name="data_y" data-feature="x"></input></p>
           </table>
        </div>
    <button onclick="hide('dialog_change_feature');" style="position:absolute; left:115px; bottom:2px; width:80px;">Close</button>
   
</div>




как прописать обработку нажатия на кнопку
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
    <script type="text/javascript">
                                                         
                                $('.action-show').on('click', function() {
                                    $('#table-visual-features tbody').html('');
                                
// тут должно быть условие  открытия диалога
});
                        </script>




сам диалог
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
<div id="dialog_change_feature">

    <h1>Change of features </h1>
    
       <div class="modal-body">
           <table>                                        
                                        <p> X <input name="data_x" data-feature="x"></input></p>
                                        <p> Y <input name="data_y" data-feature="x"></input></p>
                                        <p> Z <input name="data_y" data-feature="x"></input></p>
           </table>
        </div>
    <button onclick="hide('dialog_change_feature');" style="position:absolute; left:115px; bottom:2px; width:80px;">Close</button>
   
</div>
...
Рейтинг: 0 / 0
21.08.2013, 13:31
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38373217
vanuna
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vanuna
Участник
табличка, где все прописывается


Код: javascript
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.
 <table class="table" id="table-visual-features">
                                <thead>
                                    <tr>
                                        <th>Visual Feature</th>
                                        <th>Type [currently not used]</th>
                                        <th>Description</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                      <tr><td>x</td><td>Numeric</td><td>Values to be mapped to the x-axis</td>
                                          <td>
                                              
                                              
                                           <button class="action-show">change row</button>
                                               <button onclick="show('dialog_change_feature');">show row</button>
                                              <button class="action-add-feature">add row</button>
                                          
                                          
                                          </td></tr>                       
                               
                                    <tr>
                                        <td>r</td>
                                        <td>Numeric</td>
                                        <td>Values to be mapped to the radius</td>
                                        <td>
                                               <button class="action-show">change row</button>
                                               <button onclick="show('dialog_change_feature');">show row</button>
                                              <button class="action-add-feature">add row</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
...
Рейтинг: 0 / 0
21.08.2013, 13:34
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38373218
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vanunaформу сделал.
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<form action="#" name="change-form">
  <table>
    <tr>
      <p>
        <label for="user-name">Visual Feature</label><input></input>
      </p>  
      <p>
        <label for="user-name"> Type</label><input></input>
      </p>  
       <p>
        <label for="user-name"> Description</label> <input></input>
      </p>  
     
    </tr>
  </table>
</form>


Какая-то фиговая форма... Все лабели ссылаются на какой-то несуществующий ИДшник...
Куча каки-то абзацев...
Табличка без колонок...
Начни читать про верстку форм .
...
Рейтинг: 0 / 0
21.08.2013, 13:34
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38373219
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vanuna , для начала сделай полный ХТМЛ пример... А не кучу огрызков как у тебя сейчас.
...
Рейтинг: 0 / 0
21.08.2013, 13:35
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38373254
vanuna
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vanuna
Участник
krvsa,
Код: javascript
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.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
<!doctype html>
<html>
    <head>
        <title>IVA Server - Visualization Editor</title>
     
       
        
        <style type="text/css">

            .btn1{
                width: 30;
                height: 50;
                  
            }
            #side-by-side {
                margin-top: 20px;
                position: relative;
                width: 100%;                
                min-height: 790px;
                height: 80%;
            }

            #side-by-side > div {
                position: relative;           
                width: 49.1%;
                display: inline-block;
                height: 100%;
                margin-top: 10px;
                min-height: 790px;
                border: 1px solid grey;
            }

            #side-by-side > div + div {
                margin-left: 1%;
            }

            #side-by-side > div > h1 {
                position: absolute;
                top: -14px;
                left: 10px;
                background-color: white;
                font-size: 20px;
                font-weight: bold;
                margin: 0;
                padding: 1px 4px;
            }

            #code {

            }

            #editor {
                position: absolute;
                top: 2%;
                left: 2%;
                height: 96%;
                width: 96%;
            }

            #preview div.canvas {
                position: absolute;
                top: 2%;
                left: 2%;
                height: 96%;
                width: 96%;
            }
            
            #code-execution-configuration label {
                display: inline-block;
                padding-right: 10px;
            }

            
   #over{
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: grey;
  opacity:0.5;
  filter:alpha(opacity=50);
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
 }
 
#dialog_change_feature{
  z-index: 1001;
  width: 500px;
  height: 300px;
  background-color: #6699CC;
  border: 1px solid #0000FF;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -100px;
  padding: 5px;
  display: none;
  text-align:center;
}






        </style>
        <script type='text/javascript'>
function show(id) {document.getElementById('over').style.display = 'block'; document.getElementById(id).style.display = 'block';}
function hide(id) {document.getElementById('over').style.display = 'none'; document.getElementById(id).style.display = 'none';}
</script>

    </head>
    <body>
                     
          

 <div id="over"></div>


  
                                                                       
                            <table class="table" id="table-visual-features">
                                <thead>
                                    <tr>
                                        <th>Visual Feature</th>
                                        <th>Type [currently not used]</th>
                                        <th>Description</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                      <tr><td>x</td><td>Numeric</td><td>Values to be mapped to the x-axis</td>
                                          <td>
                                              
                                              
                                           <button class="action-show">change row</button>
                                               <button onclick="show('dialog_change_feature');">show row</button>
                                              <button class="action-add-feature">add row</button>
                                          
                                          
                                          </td></tr>                       
                               
                                    <tr>
                                        <td>r</td>
                                        <td>Numeric</td>
                                        <td>Values to be mapped to the radius</td>
                                        <td>
                                               <button class="action-show">change row</button>
                                               <button onclick="show('dialog_change_feature');">show row</button>
                                              <button class="action-add-feature">add row</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        


<div id="dialog_change_feature">

    <h1>Change of features </h1>
    
       <div class="modal-body">
           <table>                                        
                                        <p> X <input name="data_x" data-feature="x"></input></p>
                                        <p> Y <input name="data_y" data-feature="x"></input></p>
                                        <p> Z <input name="data_y" data-feature="x"></input></p>
           </table>
        </div>
    <button onclick="hide('dialog_change_feature');" style="position:absolute; left:115px; bottom:2px; width:80px;">Close</button>
   
</div>
        
    
    <script type="text/javascript">
                            $(document).ready(function() {
                               $('.action-add-feature').on('click', function() {
                                    $('#table-visual-features tbody').append('<tr><td>x</td><td>Numeric</td><td>Values to be mapped to the x-axis</td><td><buton>show</button> <button>add</button></td></tr>');
                                });
                             
                                
                                $('.action-show').on('click', show('dialog_change_feature'));
                                
                                
                            });
                        </script>

    
    
    
    </body>
</html>
...
Рейтинг: 0 / 0
21.08.2013, 13:52
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38373497
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vanuna , это настоящий говнокод...

Форму, в твоем случае, лучше сделать сразу, но скрыть. А потом показывать в нужный момент...
...
Рейтинг: 0 / 0
21.08.2013, 15:42
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38373533
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
vanuna
Код: javascript
1.
2.
3.
4.
5.
           <table>                                        
                                        <p> X <input name="data_x" data-feature="x"></input></p>
                                        <p> Y <input name="data_y" data-feature="x"></input></p>
                                        <p> Z <input name="data_y" data-feature="x"></input></p>
           </table>

мне плохо
...
Рейтинг: 0 / 0
21.08.2013, 15:58
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38373961
vanuna
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vanuna
Участник
Паганель,
ne sudite strogo, ya 4 den za javascript
...
Рейтинг: 0 / 0
21.08.2013, 23:05
| Ответить | Цитировать | Написать  
редактировать строчку в таблице при помощи диалогового окна
    #38374093
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
vanunaya 4 den za javascript
Не хотел тебя расстраивать... Но это не javascript.
...
Рейтинг: 0 / 0
22.08.2013, 08:42
| Ответить | Цитировать | Написать  
14 сообщений из 14, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / редактировать строчку в таблице при помощи диалогового окна
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38373219&tid=1447980]:
 0ms
get settings:
 6ms
get forum list:
 11ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 186ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 58ms
get tp. blocked users:
 2ms
others: 205ms
total:  488ms
созд. / загр.: 488ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]