Работа с таблицами

@most1kkk · Регистрация: 19.11.2013

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

Ребят, подскажите, как можно организовать добавления данных в таблицу(HTML таблицу). Я так понимаю, создать форму добавления информации и туда вводить значения, после записывать в переменные и выводить? А если таблица на странице не 1? Как сделать так, что-бы можно было выбрать для какой именно таблица добавляется информация. 1 таблица уже создана, другие создаются через jquery. Они все одинаковые. Я не понимаю как организовать добавления информации в разные таблицы. Как им задать уникальный id.
Буду очень благодарен, если есть другие идеи.

@Lazy_Den · 13.01.2015, 22:08

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

Как им задать уникальный id

Даже если таблицам не задавать id, то их уникальность всегда будет в индексе среди себе подобных. А вообще, вы описали задачу очень абстрактно, поэтому сложно дать конкретный ответ.

@most1kkk · 13.01.2015, 23:15 **[ТС]**

В общем, у меня есть таблица, допустим она уже заполнена данными. Будет кнопка, создать новую таблицу. Мне нужно создать новую точно такую же таблицу, но без данных. Будет кнопка редактировать таблицу. Так вот, как имнно эта кнопка поймет что именно данную таблицу нужно редактировать. Не понимаю как без БД связать id таблицы и id кнопки. И там соответственно будет страница добавления данных, в инпутах. Как после кнопки сохранить добавить эти данные в 1 таблицу, а не во все?
Может есть другой вариант решения, буду очень благодарен.

@Lazy_Den · 13.01.2015, 23:49

most1kkk, у вас же будет не одна кнопка "Редактировать" на все таблицы. Каждую отдельную таблицу вместе с такой кнопкой, можно поместить в отдельный блок, который будет служить неким ограничителем в действиях. Нажав на кнопку, мы ищем в этом же родительском элементе таблицу, которую и редактируем, и сохраняем из неё данные.
А даже если и одна кнопка, то можно предоставлять выбор определенной таблицы для редактирования, например, с помощью элемента <select>

@most1kkk · 13.01.2015, 23:54 **[ТС]**

Да да да, именно так я и хочу сделать. Типа на каждую таблицу своя кнопка. Можете одсказать последовательность действий, как осуществить?
Я думаю как. Есть таблица и кнопка, они помещегы в див. Не понимаю как через jquery сделать редактирование по нажатию. Делал тодько на пхп. И если можете, подскажите как с созданием новой таблицы(я знаю есть метод .clone)? Буду очень благодарен.

@Lazy_Den · 14.01.2015, 00:25

Тестируем пример. Код не стал сокращать, для лучшего понимания.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="main_wrapper">
    <p>
        <button id="add_tbl">Добавить таблицу</button>
    </p>
    <div class="table_wrapper">
        <table>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
            </tr>
        </table>
        <button class="edit">Редактировать</button>
        <button class="save">Сохранить</button>
    </div>
</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
var mainWrap = $('#main_wrapper');
 
mainWrap.on('click', '.edit', function () {
    var $that = $(this).hide();
    $that.siblings('table').find('td').each(function (i, el) {
        $(el).html('<input type="text" value="' + $(el).text() + '">')
    });
    $that.siblings('.save').show();
});
 
mainWrap.on('click', '.save', function () {
    var $that = $(this).hide();
    $that.siblings('table').find('input').each(function (i, el) {
        $(el).parent('td').text($(el).val());
    });
    $that.siblings('.edit').show();
});
 
$('#add_tbl').on('click', function () {
    var cloneTbl = $('.table_wrapper:eq(0)').clone();
    $('td', cloneTbl).html('&nbsp;');
    $('.save', cloneTbl).hide();
    $('.edit', cloneTbl).show();
    mainWrap.append(cloneTbl);
});

@most1kkk · 14.01.2015, 13:31 **[ТС]**

Спасибо большое, сегодня буду пробовать. А если допустим мне нужно создать таблицу, данные пустые но th оставить? Через .not? Но потом 1 th мне надо редачить все-таки, там просто месяц будет, надо будет менять. И еще, я так понимаю это все надо отправить на сервер, а то после обновить оно не сохранится? Скажите правильно я думаю или нет. Спасибо =)

Добавлено через 4 часа 19 минут
И еще, скажите что за аргументы принимает function(i, el). Спасибо.

@Lazy_Den · 14.01.2015, 13:50

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

Скажите правильно я думаю или нет.

В общем и целом - да. В принципе, можно задать какой-то класс всем th и td, которые могут редактироваться.

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

это все надо отправить на сервер

Сохранять на сервере после редактирования , естественно, что нужно.

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

скажите что за аргументы принимает function(i, el).

i - индекс текущего элемента, el - собственно, сам текущий элемент. .each()

@most1kkk · 14.01.2015, 14:20 **[ТС]**

Ок, спасибо. И последнее у меня после редактирования таблицы, она изменяется полностью. Все css пропадает походу. И еще, у меня в ячейке есть список ul li, так вот он записывае ся в 1 строку при реактировании и послк. Как исправить?

@Lazy_Den · 14.01.2015, 14:25

most1kkk, с телепатией у меня проблемы. Сделайте пример на jsfiddle.net, тогда можно будет что-то решать.

@most1kkk · 14.01.2015, 14:41 **[ТС]**

вот ссылка http://jsfiddle.net/qpxhv40x/
Смотрите, у меня там есть чекбоксы, мне их редактировать так не нужно. Мне нужно редачить только текст и все.

Добавлено через 2 минуты
И если Вы уже будете смотреть, то напишите, пожалуйста, как можно проверить отмечен ли чекбокс или нет и сохранить его, тоисть чтоб после перзагрузки он остался отмеченным или нет.

@Lazy_Den · 14.01.2015, 15:01

most1kkk, тут гораздо проще будет использовать атрибут contenteditable="true" для ячеек и отдельных элементов, которые можно редактировать. Кликаете в этом примере на ячейки и печатаете. Кнопку "Редактировать", в таком случае, можно убрать. Хотя, можно и добавлять атрибут contenteditable динамически по нажатию на ту кнопку, а при сохранении - атрибут удалять

@most1kkk · 14.01.2015, 15:13 **[ТС]**

Ок. Спасибо большое. Как тогда сохранить эти данные и отправить в пхп? serialize?

Добавлено через 3 минуты
Если сделать contenteditable="true", то чекбоксы не работают.

@Lazy_Den · 14.01.2015, 15:14

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

Как тогда сохранить эти данные и отправить в пхп?

Метод serialize() работает с формами, которых я у вас в коде не наблюдал. И какие именно данные вы собираетесь сохранять? Всё содержимое ячеек? Ну и где вы собираетесь хранить эти данные, как использовать в дальнейшем и т.д. - это тоже важные вопросы.

@most1kkk · 14.01.2015, 15:16 **[ТС]**

Да, все содержимое ячеек. Хранить думаю просто в переменных, без БД. Использовать как, просто подставлять новые сохраненные данные вместо старых в эти же ячейки и все.

@Lazy_Den · 14.01.2015, 15:20

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

Хранить думаю просто в переменных, без БД.

Это как? Может вы хотели сказать, что хранить будете в файлах?

@most1kkk · 14.01.2015, 15:21 **[ТС]**

Точнее да)) Я вот думаю может все-таки легче в БД? или как посоветуете?

@Lazy_Den · 14.01.2015, 15:27

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

или как посоветуете?

Всё зависит от задач. Если данные таблиц не принимают участие в каких-то других операциях, то можно и в файле. Но если, к примеру, вам нужно будет найти таблицу по определенному значению какой-то отдельно взятой ячейки, а таблиц таких у вас будет 100500, то будет весьма глупо делать поиск по такому количеству файлов.

@most1kkk · 14.01.2015, 15:35 **[ТС]**

Мне из все таблиц нужно будет только сумму посчитать. Допустим за январь у меня есть 10 таблиц со своими суммами. Мне нужно посчитать общую сумму и все. Не могу сообразить как лучше сделать.

@Lazy_Den · 14.01.2015, 15:39

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

Не могу сообразить как лучше сделать.

Ну, эт я не знаю.

У меня есть дурная привычка: когда я начинаю разрабатывать проект, то по максимуму определяю все необходимые действия и ресурсы, которые для этого понадобятся, а не решаю вопросы походу пьесы

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@most1kkk 0 / 0 / 0 Регистрация: 19.11.2013 Сообщений: 63

	Работа с таблицами 13.01.2015, 21:20. Показов 4164. Ответов 21 Метки нет (Все метки) Ребят, подскажите, как можно организовать добавления данных в таблицу(HTML таблицу). Я так понимаю, создать форму добавления информации и туда вводить значения, после записывать в переменные и выводить? А если таблица на странице не 1? Как сделать так, что-бы можно было выбрать для какой именно таблица добавляется информация. 1 таблица уже создана, другие создаются через jquery. Они все одинаковые. Я не понимаю как организовать добавления информации в разные таблицы. Как им задать уникальный id. Буду очень благодарен, если есть другие идеи. 0

@most1kkk 0 / 0 / 0 Регистрация: 19.11.2013 Сообщений: 63
	13.01.2015, 23:15 [ТС]
	В общем, у меня есть таблица, допустим она уже заполнена данными. Будет кнопка, создать новую таблицу. Мне нужно создать новую точно такую же таблицу, но без данных. Будет кнопка редактировать таблицу. Так вот, как имнно эта кнопка поймет что именно данную таблицу нужно редактировать. Не понимаю как без БД связать id таблицы и id кнопки. И там соответственно будет страница добавления данных, в инпутах. Как после кнопки сохранить добавить эти данные в 1 таблицу, а не во все? Может есть другой вариант решения, буду очень благодарен. 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	13.01.2015, 23:49
	most1kkk, у вас же будет не одна кнопка "Редактировать" на все таблицы. Каждую отдельную таблицу вместе с такой кнопкой, можно поместить в отдельный блок, который будет служить неким ограничителем в действиях. Нажав на кнопку, мы ищем в этом же родительском элементе таблицу, которую и редактируем, и сохраняем из неё данные. А даже если и одна кнопка, то можно предоставлять выбор определенной таблицы для редактирования, например, с помощью элемента <select> 0

@most1kkk 0 / 0 / 0 Регистрация: 19.11.2013 Сообщений: 63
	13.01.2015, 23:54 [ТС]
	Да да да, именно так я и хочу сделать. Типа на каждую таблицу своя кнопка. Можете одсказать последовательность действий, как осуществить? Я думаю как. Есть таблица и кнопка, они помещегы в див. Не понимаю как через jquery сделать редактирование по нажатию. Делал тодько на пхп. И если можете, подскажите как с созданием новой таблицы(я знаю есть метод .clone)? Буду очень благодарен. 0

@most1kkk 0 / 0 / 0 Регистрация: 19.11.2013 Сообщений: 63
	14.01.2015, 13:31 [ТС]
	Спасибо большое, сегодня буду пробовать. А если допустим мне нужно создать таблицу, данные пустые но th оставить? Через .not? Но потом 1 th мне надо редачить все-таки, там просто месяц будет, надо будет менять. И еще, я так понимаю это все надо отправить на сервер, а то после обновить оно не сохранится? Скажите правильно я думаю или нет. Спасибо =) Добавлено через 4 часа 19 минут И еще, скажите что за аргументы принимает function(i, el). Спасибо. 0

@most1kkk 0 / 0 / 0 Регистрация: 19.11.2013 Сообщений: 63
	14.01.2015, 14:20 [ТС]
	Ок, спасибо. И последнее у меня после редактирования таблицы, она изменяется полностью. Все css пропадает походу. И еще, у меня в ячейке есть список ul li, так вот он записывае ся в 1 строку при реактировании и послк. Как исправить? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	14.01.2015, 14:25
	most1kkk, с телепатией у меня проблемы. Сделайте пример на jsfiddle.net, тогда можно будет что-то решать. 0

@most1kkk 0 / 0 / 0 Регистрация: 19.11.2013 Сообщений: 63
	14.01.2015, 14:41 [ТС]
	вот ссылка http://jsfiddle.net/qpxhv40x/ Смотрите, у меня там есть чекбоксы, мне их редактировать так не нужно. Мне нужно редачить только текст и все. Добавлено через 2 минуты И если Вы уже будете смотреть, то напишите, пожалуйста, как можно проверить отмечен ли чекбокс или нет и сохранить его, тоисть чтоб после перзагрузки он остался отмеченным или нет. 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	14.01.2015, 15:01
	most1kkk, тут гораздо проще будет использовать атрибут contenteditable="true" для ячеек и отдельных элементов, которые можно редактировать. Кликаете в этом примере на ячейки и печатаете. Кнопку "Редактировать", в таком случае, можно убрать. Хотя, можно и добавлять атрибут contenteditable динамически по нажатию на ту кнопку, а при сохранении - атрибут удалять 0

@most1kkk 0 / 0 / 0 Регистрация: 19.11.2013 Сообщений: 63
	14.01.2015, 15:13 [ТС]
	Ок. Спасибо большое. Как тогда сохранить эти данные и отправить в пхп? serialize? Добавлено через 3 минуты Если сделать contenteditable="true", то чекбоксы не работают. 0

@most1kkk 0 / 0 / 0 Регистрация: 19.11.2013 Сообщений: 63
	14.01.2015, 15:16 [ТС]
	Да, все содержимое ячеек. Хранить думаю просто в переменных, без БД. Использовать как, просто подставлять новые сохраненные данные вместо старых в эти же ячейки и все. 0

@most1kkk 0 / 0 / 0 Регистрация: 19.11.2013 Сообщений: 63
	14.01.2015, 15:21 [ТС]
	Точнее да)) Я вот думаю может все-таки легче в БД? или как посоветуете? 0

@most1kkk 0 / 0 / 0 Регистрация: 19.11.2013 Сообщений: 63
	14.01.2015, 15:35 [ТС]
	Мне из все таблиц нужно будет только сумму посчитать. Допустим за январь у меня есть 10 таблиц со своими суммами. Мне нужно посчитать общую сумму и все. Не могу сообразить как лучше сделать. 0