Гость
Целевая тема:
Создать новую тему:
Автор:
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / редактировать строчку в таблице при помощи диалогового окна / 14 сообщений из 14, страница 1 из 1
21.08.2013, 02:47
    #38372648
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, 08:43
    #38372700
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
редактировать строчку в таблице при помощи диалогового окна
vanunaкак это можно реализовать?
Как вариант...
- Показать ДИВ с формой
- Заполнить поля
- Проверить поля
- Нажать на кнопку "Записать"
- Записать поля в строчку таблицы
...
Рейтинг: 0 / 0
21.08.2013, 11:32
    #38372964
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:35
    #38372972
Паганель
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
редактировать строчку в таблице при помощи диалогового окна
...
Рейтинг: 0 / 0
21.08.2013, 11:45
    #38372994
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, 13:31
    #38373214
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:34
    #38373217
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
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
редактировать строчку в таблице при помощи диалогового окна
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:35
    #38373219
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
редактировать строчку в таблице при помощи диалогового окна
vanuna , для начала сделай полный ХТМЛ пример... А не кучу огрызков как у тебя сейчас.
...
Рейтинг: 0 / 0
21.08.2013, 13:52
    #38373254
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, 15:42
    #38373497
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
редактировать строчку в таблице при помощи диалогового окна
vanuna , это настоящий говнокод...

Форму, в твоем случае, лучше сделать сразу, но скрыть. А потом показывать в нужный момент...
...
Рейтинг: 0 / 0
21.08.2013, 15:58
    #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, 23:05
    #38373961
vanuna
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
редактировать строчку в таблице при помощи диалогового окна
Паганель,
ne sudite strogo, ya 4 den za javascript
...
Рейтинг: 0 / 0
22.08.2013, 08:42
    #38374093
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
редактировать строчку в таблице при помощи диалогового окна
vanunaya 4 den za javascript
Не хотел тебя расстраивать... Но это не javascript.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / редактировать строчку в таблице при помощи диалогового окна / 14 сообщений из 14, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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