таблица с плюсиками в html / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / таблица с плюсиками в html

37 сообщений из 37, показаны все 2 страниц

все

таблица с плюсиками в html

#38384916

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

Добрый день. Проясните ситуацию плиз. Из Delphi пытаюсь сгенерировать html файл. В html нужно перенести древовидную структуру и ряд атрибутов (например 4). Хотел бы сделать это в таблице у которой строки раскрываются по нажатию плюсиков. В html не силен. Подскажите возможно ли так сделать? Если нет, то может есть более простой вариант как решить мою задачу.

...

Рейтинг:

0 / 0

03.09.2013, 09:06

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38384967

IDVsbruck

Участник

Откуда: Украина

Сообщения: 4 289

Рейтинг: 0 / 0

Типа такого или такого ?

...

Рейтинг:

0 / 0

03.09.2013, 09:50

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38384968

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

nikompможет есть более простой вариант как решить мою задачу.
А то !

...

Рейтинг:

0 / 0

03.09.2013, 09:50

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385067

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

IDVsbruck,
скорее всего второй вариант, атрибуты у всех уровней дерева одни и теже
такую таблицу можно сгенерить из delphi, например в блокноте, прописав определенные теги?

...

Рейтинг:

0 / 0

03.09.2013, 10:48

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385079

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

IDVsbruck,

ой, так там и ког даже есть, сразу не увидел )) бум разбираться

Еще вопрос, может не по теме.

Рядом с html должен лежать xml с теми же данными. Так вот слышал что есть возможность сгенерить xml, а затем перегнать его в html при помощи файла трансформации (xlst вроде). С этим тоже никогда дела не имел.
Что проще будет, отдельно сгенерить 2 файла или один xml + вручную xlst?

...

Рейтинг:

0 / 0

03.09.2013, 10:54

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385092

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

nikomp,

я тоже из Delphi выгружаю данные в HTML. Можно воспользоваться библиотеками, что предложили выше, или шаблоном, который прикладываю.

...

Рейтинг:

0 / 0

03.09.2013, 10:56

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385094

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

Только у меня дерево многоуровневое
например
Сборка
Подсборка
Подсборка
...
Деталь
...
Деталь
Деталь
...
Деталь
...

...

Рейтинг:

0 / 0

03.09.2013, 10:56

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385096

Паганель

Участник

Откуда: Винница

Сообщения: 22 663

Рейтинг: 0 / 0

имхоxslt тяжел для понимания, если есть возможность его избежать, то лучше избежать

...

Рейтинг:

0 / 0

03.09.2013, 10:57

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385145

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

user89,
спасибо, за код, пригодиться в будущем, но к сожалению в данный момент БД оракловая, данные получаю АПИ функциями сервера приложений.
Что касается шаблонов, предложенных выше то там структура 2-х уровневая, а мне нужна многоуровневая

...

Рейтинг:

0 / 0

03.09.2013, 11:23

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385163

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

nikomp,

а тут в демках можно мышью столбцы тащить наверх, много уровней http://demos.kendoui.com/web/grid/index.html

Тот шаблон, что я предложил, не привязан к конкретной СУБД и работает с объектом Recordset (возможно его и нельзя привязать к данным, что получаются АПИ функциями сервера приложений)

...

Рейтинг:

0 / 0

03.09.2013, 11:32

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385289

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

user89,

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

...

Рейтинг:

0 / 0

03.09.2013, 12:47

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385298

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

и еще, попробовал скопипастить код из предложенных выше ссылок, вставил в текстовый файл, переименовал с расширением *.html, попробовал открыть браузером - ПУСТО. Что я не так сделал?

...

Рейтинг:

0 / 0

03.09.2013, 12:54

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385314

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

nikompЧто я не так сделал?
Показал бы что и откуда скопипастил...

...

Рейтинг:

0 / 0

03.09.2013, 13:01

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385321

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

krvsa,

Код: 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.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
            <script src="../../content/shared/js/people.js"></script>

        <div id="example" class="k-content">
            <div id="clientsDb">

                <div id="grid" style="height: 380px"></div>

            </div>

            <style scoped>
                #clientsDb {
                    width: 692px;
                    height: 413px;
                    margin: 30px auto;
                    padding: 51px 4px 0 4px;
                    background: url('../../content/web/grid/clientsDb.png') no-repeat 0 0;
                }
            </style>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: createRandomData(50),
                            pageSize: 10
                        },
                        groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
                        columns: [ {
                                field: "FirstName",
                                width: 90,
                                title: "First Name"
                            } , {
                                field: "LastName",
                                width: 90,
                                title: "Last Name"
                            } , {
                                width: 100,
                                field: "City"
                            } , {
                                field: "Title"
                            } , {
                                field: "BirthDate",
                                title: "Birth Date",
                                template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'
                            } , {
                                width: 50,
                                field: "Age"
                            }
                        ]
                    });
                });
            </script>
        </div>


</body>
</html>

конкретно вот этот код скопировал в блокнот

...

Рейтинг:

0 / 0

03.09.2013, 13:06

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385360

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

nikomp,

надо указать правильно пути к файлам .css и .js

Код: html

1.
2.
3.
4.
5.

    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="../../content/shared/js/people.js"></script>

Пояснения к моему шаблону.
Алгоритм простой. Сначала данные сортируются по 1-му столбцу, 2-му и т.д. Далее двигаемся по отсортированному списку. Если текущая строка отличается от предыдущей - то это начало новой группы (метод cmd_NoVerticalClick )

...

Рейтинг:

0 / 0

03.09.2013, 13:30

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385378

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

user89,

а можно примерчик html, который генерируется при помощи Вашего шаблона.

начал разбираться с деревьями в html, вот тут вроде понятно написано
http://abruslik.blogspot.ru/2013/03/html-css-javascript.html

только не понятно куда мне воткнуть атрибуты каждого узла

...

Рейтинг:

0 / 0

03.09.2013, 13:41

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385442

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

nikompа можно примерчик html, который генерируется при помощи Вашего шаблона. В моем шаблоне увы нет Parent - Child , там просто группировка повторяющихся значений.

Выглядит так

Узлы можно разворачивать не только по значку + / - , но и по всему слову. За основу взял откуда-то стащенный из инета код (спасибо Яростный Меч за исправление алгоритма). Прикладываю к сообщению.

nikompначал разбираться с деревьями в html, вот тут вроде понятно написано
http://abruslik.blogspot.ru/2013/03/html-css-javascript.html
только не понятно куда мне воткнуть атрибуты каждого узла Тут смотрю, совсем без JavaScript. Гляну вечерком, сейчас совсем нет времени...

...

Рейтинг:

0 / 0

03.09.2013, 14:15

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385444

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

файл не приложился...

...

Рейтинг:

0 / 0

03.09.2013, 14:16

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385460

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

user89,

буду признателен за помощь ))
атрибуты например можно писать в текст узла, но это не очень как-то )

...

Рейтинг:

0 / 0

03.09.2013, 14:22

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385584

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

Пока получилось вот что, в принципе все устраивает, только нужно вывести еще атрибуты куда-то, как лучше сделать?

...

Рейтинг:

0 / 0

03.09.2013, 15:25

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38385807

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

nikomp только нужно вывести еще атрибуты куда-то Не совсем понял...

...

Рейтинг:

0 / 0

03.09.2013, 17:48

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386142

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

user89,

для каждого узла в дереве (кроме файлов) должны быть выведены атрибуты (например наименование, масса, кто разработал и т.д.). Сейчас у меня получилось вывести структуру, а вот куда впихнуть атрибуты? Например, сделать еще одну область, в которую выводились бы атрибуты выбранного узла. Но с таблицей было бы проще, вот только таблица должна отражать многоуровневую структуру

...

Рейтинг:

0 / 0

04.09.2013, 09:11

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386152

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

nikompкуда впихнуть атрибуты?
В теги и пихай...

Код: html

<li data-prm1='prm1' data-prm2='prm2'>...</li>

...

Рейтинг:

0 / 0

04.09.2013, 09:29

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386170

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

krvsa,

не понимаю, это прикол?
попробовал добавить вашу строку, что-то никаких изменений

...

Рейтинг:

0 / 0

04.09.2013, 09:49

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386201

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

nikompНо с таблицей было бы проще, вот только таблица должна отражать многоуровневую структуру А мой пример выше ? Я в гугле много нарыл древовидных таблиц, это наверное самый простой вариант.
Без JavaScript на одном CSS, таблицу с узлами сделать очень тяжело.

...

Рейтинг:

0 / 0

04.09.2013, 10:17

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386262

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

user89,

В принципе, конечно, то что нужно, но мои знания в JavaScript = 0, поэтому не совсем понимаю как модифицировать этот код под мою задачу.
Как там вообще организована иерархия?
Каждая строка - это таблица с пробелами (&nbsp)?
Что за функции в теге /head? могу я их перенести в свой html?

...

Рейтинг:

0 / 0

04.09.2013, 11:04

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386297

krvsa

Участник

Откуда: г Волжский

Сообщения: 13 823

Рейтинг: 1 / 0

nikompне понимаю, это прикол?
Нет.
Это пример применения параметров у элемента <li>

nikompпопробовал добавить вашу строку, что-то никаких изменений
Не совсем понимаю чем именно "моя строка" поможет тебе...
Но ты можешь действовать по аналогии. Вот это может тебе таки помочь...

...

Рейтинг:

0 / 0

04.09.2013, 11:21

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386338

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

user89,

сейчас попробовал поработать с вашим примеров, вроде получается, только на последнем уровне у меня идет гиперссылка на файл,
как модифицировать группу

Код: html

1.
2.
3.
4.
5.
6.

<tr id="table1_0_3">
      <td><a href="#" onclick="treetable_toggleRow('table1_0_3');"><img src="img/minus.bmp" class="button" alt="" />Чертеж 1095/045-09-Л</a></td>
      <td class="number">Значение1</td>
      <td class="number">Значение1</td>
      <td class="number">Значение1</td>
    </tr>

чтоб Чертеж 1095/045-09-Л был гиперссылкой не на таблицу а на файл?

...

Рейтинг:

0 / 0

04.09.2013, 11:42

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386360

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

nikompЧто за функции в теге /head? могу я их перенести в свой html? Можно. По правильному, скрипты и стили выносятся в отдельные файлы, но если хочется, чтобы они были в одном HTML, то их частенько заключают в блок <head> . Мне также встречались примеры, когда скрипт располагался в самом конце <body> ...
Я ведь тоже плохо знаю JavaScript и не до конца понимаю как работают функции в примере TestTreeTable.zip
Для создания шаблона я ориентировался на ID в строках типа

Код: javascript

1.
2.
3.
4.

<tr id="table1_0" >
<tr id="table1_0_0_1" >
<tr id="table1_0_3_0" >
<tr id="root2_0_0_2" >

Delphi-программа считывала данные и генерила строки именно с этими ID . Если ID-шники сформированы правильно, то скрипт будет сворачивать/разворачивать узлы.

...

Рейтинг:

0 / 0

04.09.2013, 11:55

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386380

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

user89,

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

...

Рейтинг:

0 / 0

04.09.2013, 12:02

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386408

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

nikomp,

закроем тег </a> после <img>
Рядышком сделаем новую ссылку на наш файл, примерно так

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.

<tr id="table1_0_3">
  <td>
    <a href="#" onclick="treetable_toggleRow('table1_0_3');"><img src="img/minus.bmp" class="button" alt="" /></a>
    <a href="D:\2222\Мой Файл.docx">Чертеж 1095/045-09-Л</a>
  </td>
  <td class="number">Значение1</td>
  <td class="number">Значение1</td>
  <td class="number">Значение1</td>
</tr>

...

Рейтинг:

0 / 0

04.09.2013, 12:14

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386443

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

user89,

да, спасибо, все работает.
ну хотелось бы еще одно улучшение, чтоб все было совсем идеально )))
сейчас все ссылки зеленые. как сделать чтоб ссылки на файле отличались по цвету или были выделены жирно?

...

Рейтинг:

0 / 0

04.09.2013, 12:27

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386483

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

nikomp,

тегу <a> присвоить свой класс, например

Код: html

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  .MyStyle {
    color:red;
    border-bottom:1px dotted red!important;
    text-decoration:none;
  }
  .MyStyle:hover {
    color:red;
    border-bottom:none!important;
    text-decoration:none!important;
  }
</style>
</head>
<body>                     
  <a href="http://www.sql.ru/" class="MyStyle">Перейти на главную страницу SQL.RU (При наведении мыши, пунктир исчезнет)</a>
</body>
</html>

...

Рейтинг:

0 / 0

04.09.2013, 12:47

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386513

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

user89,

Еще раз огромное спасибо, за пример и помощь
Теперь осталось на Delphi сгенерить, то что получилось ))

...

Рейтинг:

0 / 0

04.09.2013, 12:59

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386793

nikomp

Участник

Откуда: Нижний Новгород

Сообщения: 907

Рейтинг: 0 / 0

user89,

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

...

Рейтинг:

0 / 0

04.09.2013, 15:31

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38386987

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

nikomp,

заменить символ +/- ?
Или рядом добавить?

...

Рейтинг:

0 / 0

04.09.2013, 16:53

| Ответить | Цитировать | Написать

таблица с плюсиками в html

#38503325

user89

Участник

Сообщения: 2 087

Рейтинг: 0 / 0

Вариант с простым JavaScript
Tree Table CSS

...

Рейтинг:

0 / 0

17.12.2013, 12:27

| Ответить | Цитировать | Написать

37 сообщений из 37, показаны все 2 страниц

все

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / таблица с плюсиками в html

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?all=1&fid=22&tid=1447540]:	0ms
get settings:	5ms
get forum list:	9ms
check forum access:	2ms
check topic access:	2ms
track hit:	145ms
get topic data:	6ms
get forum data:	2ms
get page messages:	34ms
get tp. blocked users:	1ms
others:	192ms

total:	398ms

	Необходимые cookie
	Cookie для сбора статистики
	Cookie для маркетинга и рекламы