Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jquery как изменить строчку в табличке / 12 сообщений из 12, страница 1 из 1
09.09.2013, 15:44
    #38391147
vanuna
vanuna
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
у меня есть табличка, каждая строчка заканчивается кнопочками редактировать или удалить строчку.
С удалением строчки проблем нет, я сделалал это, как сделать, чтобы строчка редактировалась при нажатии на кнопку, то есть возникает диалоговое окно,где я делаю изменения, потом наживаю enter и вижу обновленную строчку в табличке.
Вот код для таблички
Код: 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.
 
                        <div class="row-fluid">                                                            
                            <table class="table table-striped" 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="btn btn-mini action_change"><i class="icon-pencil" </i></button>
                                            <button class="btn btn-mini btn-danger action-remove-visual-feature" > <i class="icon-trash icon-white"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>y</td>
                                        <td>Numeric</td>
                                        <td>Values to be mapped to the y-axis</td>
                                        <td>
                                            <button class="btn btn-mini"><i class="icon-pencil"></i></button>
                                            <button class="btn btn-mini btn-danger action-remove-visual-feature" ><i class="icon-trash icon-white"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>c</td>
                                        <td>Any</td>
                                        <td>Values to be mapped to color</td>
                                        <td>
                                            <button class="btn btn-mini"><i class="icon-pencil"></i></button>
                                            <button class="btn btn-mini btn-danger action-remove-visual-feature"><i class="icon-trash icon-white"></i></button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>r</td>
                                        <td>Numeric</td>
                                        <td>Values to be mapped to the radius</td>
                                        <td>
                                            <button class="btn btn-mini"><i class="icon-pencil"></i></button>
                                            <button class="btn btn-mini btn-danger action-remove-visual-feature"><i class="icon-trash icon-white"></i></button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>



вот код для обработки события, если кнопка нажата

Код: 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.
  <script type="text/javascript">
                            $(document).ready(function() {
                                $('.action-remove-visual-features').on('click', function() {
                                    $('#table-visual-features tbody').html('');
                                });


                                $('.action-add-visual-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><button class="btn btn-mini"><i class="icon-pencil"></i></button> <button class="btn btn-mini btn-danger action-remove-visual-feature"><i class="icon-trash icon-white"></i></button></td></tr>');
                                });
                                $('#table-visual-features tbody').on('click', 'tr button.action-remove-visual-feature', function(e) {
                                   
                                    $(this).parents('tr').remove();
                                });
                                
                                $('.action_change').on('click', function(){
                                    console.log("clicked on pancil");
                                });
                                
                                
                                                             
                                
                         
                            });
                        </script>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
09.09.2013, 15:52
    #38391162
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
vanunaкак сделать, чтобы строчка редактировалась при нажатии на кнопку, то есть возникает диалоговое окно,где я делаю изменения, потом наживаю enter и вижу обновленную строчку в табличке
Вот несложный алгоритм:
- показать форму
- заполнить ее значениями из строки таблицы
- отработать событие onsubmit у формы
- значения из формы записать в нужную строку таблицы
- спрятать форму

Вот вроде и все...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.09.2013, 20:39
    #38396817
SharuPoNemnogu
SharuPoNemnogu
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
Зачем форму какую то.. При нажатии на кнопку текст в строке заменяем на <input type="text" value="<текст в строке>" id="temp" />. При потере фокуса с инпута меняем обратно этот input на текст из value.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
14.09.2013, 21:15
    #38396827
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
SharuPoNemnogu , да ты просто король интерфейса!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.09.2013, 20:15
    #38397119
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
krvsa, можете выложить пример с человеческим интерфейсом?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.09.2013, 22:27
    #38397158
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
катастрофаможете выложить пример с человеческим интерфейсом?
Тут больше вопрос к дизайнерам...
Но даже простая формочка с набором полей всяко лучше редактирования тех полей прямо в строке таблицы...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
15.09.2013, 22:33
    #38397159
катастрофа
катастрофа
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
krvsa, тут не до дизайна ...
мне вот нужна таблица с текстерей, чтобы вводить можно было
не подскажите как будет код
skript1 и skript2, расставляют № п\п и добавляют строку-текстерею
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
<!DOCTYPE html>
<!--html5-->

<html>

<head>
  
</head>

<body>

<input type="button" value="№ п\п" onclick="skript1"/>Наименование документа<br>
<!--спецсимволы HTML — стрелки - http://www.xiper.net/manuals/html/characters/arrows.html-->
  <textarea rows="1"  cols="3"></textarea>.<textarea rows="1" tabindex="1"> и </textarea>.<input type="button" value="&#8595;" onclick="skript2"/><br>
  <textarea rows="1"  cols="3"></textarea>.<textarea rows="1" tabindex="2"> и </textarea>.<input type="button" value="&#8595;" onclick="skript2"/><br>
  <textarea rows="1"  cols="3"></textarea>.<textarea rows="1" tabindex="3"> и </textarea>.<input type="button" value="&#8595;" onclick="skript2"/><br>
  <textarea rows="1"  cols="3"></textarea>.<textarea rows="1" tabindex="4"> и </textarea>.<input type="button" value="&#8595;" onclick="skript2"/><br>
  
</body>

</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.09.2013, 09:08
    #38397298
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
катастрофа,

Javascript динамическая html таблица

имхо, все-таки лучше через модальную форму, как выше советовал krvsa ...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.09.2013, 16:55
    #38397924
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
катастрофамне вот нужна таблица с текстерей, чтобы вводить можно было
Я-то как раз ратую за разделение ввода и отображения... Редактирование в форме, а отображение в таблице...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.09.2013, 18:50
    #38402001
vanuna
vanuna
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
Я тут написал свой вариант.
Пока не получается понять, почему update строки происходит на второй клик.
И иногда значения не те заносятся.
Посмотрите,пожалуйста
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.09.2013, 18:50
    #38402003
vanuna
vanuna
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
vanuna,

http://jsfiddle.net/jaW7m/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.10.2013, 02:24
    #38432176
vanuna
vanuna
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jquery как изменить строчку в табличке
тема еще актуальна. Вот, что получилось сделать. http://jsfiddle.net/toshkaexe/Vds69/

Теперь хочется сделать, чтобы каждое новое создание строчки при необходимости можно было редактировать.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jquery как изменить строчку в табличке / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 481ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1447773]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 150ms
get topic data:
 10ms
get forum data:
 3ms
get page messages:
 55ms
get tp. blocked users:
 1ms
others: 233ms
total:  481ms
x
x
Закрыть


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