Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.70/40: Рейтинг темы: голосов - 40, средняя оценка - 4.70
109 / 88 / 28
Регистрация: 21.08.2012
Сообщений: 371

Сделать турнирную сетку

12.07.2014, 15:16. Показов 8396. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем добрый день! Хочу сделать собственную турнирную систему, и первая проблема - сетки. Первой мыслью было сделать таблицу в Excel и переконвертировать ее в html. Сетка на 16 человек занимает 600 строк Если посмотреть исходный код здесь: http://www.tournamentservice.n... hp?chart=5, то тут гораздо меньший объем. Кто-нибудь может объяснить, как это сделано там? И как это сделать мне? Заранее спасибо
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
12.07.2014, 15:16
Ответы с готовыми решениями:

Сделать сетку по центру
Ребят, привет. Подскажите как сделать отображение сетки по центру ? http://altamed-sport.ru То есть внизу у меня есть подготовка,...

Как сделать сетку посредством float?
Суть в ом.что есть верхний блок на всю ширину(блок1), есть центральный блок в котором три вложенные блока,левый 20% ширины,центральный...

Из сводной таблицы спортсменов сформировать турнирную сетку
Здравствуйте! Обычной записи действий для макроса недостаточно, поэтому спрашиваю у вас :) Есть сгруппированный в сводной таблице...

10
368 / 406 / 165
Регистрация: 29.05.2014
Сообщений: 1,494
12.07.2014, 15:36
Ну судя по всему там присутствует какой то програминг вероятно PHP, а так же БД скорее всего тоже есть. Как по ссылке одним HTML не обойтись однозначно.
1
109 / 88 / 28
Регистрация: 21.08.2012
Сообщений: 371
12.07.2014, 15:45  [ТС]
BarbosLV, ну понятное дело, что PHP. Но ведь PHP создаёт HTML и выводит его
0
368 / 406 / 165
Регистрация: 29.05.2014
Сообщений: 1,494
12.07.2014, 16:08
Ну а в чём вопрос тогда?
Вот у меня есть пример PHP вывода из БД как раз для 16 участников
Кликните здесь для просмотра всего текста
PHP
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
    <?php
    $data = array(
        0 => array('stage' => '1', 'first_opponent' => 'Vayass', 'second_opponent' => 'tima', 'game_over' => '2'),
        1 => array('stage' => '1', 'first_opponent' => 'F_B*', 'second_opponent' => 'User16', 'game_over' => '2'),
        2 => array('stage' => '1', 'first_opponent' => 'User17', 'second_opponent' => 'eSFo', 'game_over' => '1'),
        3 => array('stage' => '1', 'first_opponent' => 'User19', 'second_opponent' => 'User20', 'game_over' => '1'),
        4 => array('stage' => '1', 'first_opponent' => 'User21', 'second_opponent' => 'Iv', 'game_over' => '1'),
        5 => array('stage' => '1', 'first_opponent' => 'User23', 'second_opponent' => 'User24', 'game_over' => '1'),
        6 => array('stage' => '1', 'first_opponent' => 'Marius', 'second_opponent' => 'NaZZg001', 'game_over' => '2'),
        7 => array('stage' => '1', 'first_opponent' => 'User28', 'second_opponent' => 'User29', 'game_over' => '1'),
        8 => array('stage' => '2', 'first_opponent' => 'Vayass', 'second_opponent' => 'eSFo', 'game_over' => '2'),
        9 => array('stage' => '2', 'first_opponent' => 'F_B*', 'second_opponent' => 'User29', 'game_over' => '1'),
        10 => array('stage' => '2', 'first_opponent' => 'User20', 'second_opponent' => 'User24', 'game_over' => '2'),
        11 => array('stage' => '2', 'first_opponent' => 'Iv', 'second_opponent' => 'Marius', 'game_over' => '2'),
        12 => array('stage' => '3', 'first_opponent' => 'Vayass', 'second_opponent' => 'User20', 'game_over' => '0'),
        13 => array('stage' => '3', 'first_opponent' => 'User29', 'second_opponent' => 'Iv', 'game_over' => '0')
    );
    $win = array(1 => 'second_opponent', 2 => 'first_opponent');
    $winColor = '008F00';
    $lossColor = 'BF0000';
    $drawColor = '000000';
    $colors = array(
        0 => array('first' => $drawColor, 'second' => $drawColor),
        1 => array('first' => $lossColor, 'second' => $winColor),
        2 => array('first' => $winColor, 'second' => $lossColor)
    );
 
    function walkdesc($stage, $members = false, $html = array()) {
        global $data, $win, $colors;
        foreach($data as $key => $row) {
            if($row['stage'] == $stage and ($members === false or in_array($row[$win[$row['game_over']]], $members))) {
                unset($data[$key]);   // Сократим лишние итерации
                $rowspan = $stage > 1 ? (' rowspan="' . pow(2, $stage - 1) . '"') : '';
                $first = "<span style=\"color: #{$colors[$row['game_over']]['first']};\">{$row['first_opponent']}</span>";
                $second = "<span style=\"color: #{$colors[$row['game_over']]['second']};\">{$row['second_opponent']}</span>";
                $html[] = "<td{$rowspan}>{$first} -VS- {$second}</td>";
                if($stage > 1) {
                    walkdesc($stage - 1, array($row['first_opponent'], $row['second_opponent']), $html);
                } else {
                    echo '<tr>' . implode('', array_reverse($html)) . '</tr>';
                    if(count($html) === 1) {
                        return;   // Сократим лишние итерации
                    }
                }
                $html = array();
            }
        }
    }
 
    $stages = 3;
    echo '<table border="1"><tr>';
    for($i = 1; $i <= $stages; ++$i) {
        echo "<th>Раунд {$i}</th>";
    }
    echo '</tr>';
    walkdesc($stages);
    echo '</table>';
    ?>
1
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
12.07.2014, 21:20
Никита, а такое прокатит? как заполнять это другой разговор.
Или тебе не это нужно.
Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
9
10
11
#champ table {font:italic bold 16px 'Courier new', monospace; color:royalblue;}
#champ table {float:left; background:#66cc33 url(centr.gif) center repeat-y;}
#champ table {border-collapse:separate; border-spacing:0; padding:0 0 0 5px;}
#champ table {width:155px; height:42px; white-space:nowrap;}
#champ .arrow1, #champ .arrow2 {border-style:solid; overflow:hidden; float:left;}
#champ .arrow1, #champ .arrow2 {border-width:21px 0px 21px 25px; height:0px;}
 
#champ .arrow1 {border-color:#66cc33 #66cc33 #66cc33 transparent}
#champ .arrow2 {border-color:transparent transparent transparent #66cc33}
 
#champ .marg {margin:3px 5px 3px 0; float:left;}
HTML5
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Чемпионат</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="champion.css">
</head>
 
<body>
 
<table border="0" cellpadding="0" cellspacing="0" id="champ">
<tr><td><div class="marg"><div class="arrow1"></div>
<table><tr><td>первый<br>второй</td></tr></table>
<div class="arrow2"></div></div></td>
 
<td rowspan="2"><div class="arrow1"></div>
<table><tr><td>первый<br>третий</td></tr></table>
<div class="arrow2"></div></td>
 
<td rowspan="4"><div class="arrow1"></div>
<table><tr><td>первый<br>восьмой</td></tr></table>
<div class="arrow2"></div></td>
 
<td rowspan="8"><div class="arrow1"></div>
<table><tr><td>первый<br>одинадцатый</td></tr></table>
<div class="arrow2"></div></td></tr>
 
<tr><td><div class="marg"><div class="arrow1"></div>
<table><tr><td>третий<br>четвёртый</td></tr></table>
<div class="arrow2"></div></div></td></tr>
 
<tr><td><div class="marg"><div class="arrow1"></div>
<table><tr><td>пятый<br>шестой</td></tr></table>
<div class="arrow2"></div></div></td>
 
<td rowspan="2"><div class="arrow1"></div>
<table><tr><td>пятый<br>восьмой</td></tr></table>
<div class="arrow2"></div></td></tr>
 
<tr><td><div class="marg"><div class="arrow1"></div>
<table><tr><td>седьмой<br>восьмой</td></tr></table>
<div class="arrow2"></div></div></td>
 
</tr><tr><td><div class="marg"><div class="arrow1"></div>
<table><tr><td>девятый<br>десятый</td></tr></table>
<div class="arrow2"></div></div></td>
 
<td rowspan="2"><div class="marg"><div class="arrow1"></div>
<table><tr><td>девятый<br>одинадцатый</td></tr></table>
<div class="arrow2"></div></div></td>
 
<td rowspan="4"><div class="arrow1"></div>
<table><tr><td>одинадцатый<br>пятнадцатый</td></tr></table>
<div class="arrow2"></div></td></tr>
 
<tr><td><div class="marg"><div class="arrow1"></div>
<table><tr><td>одинадцатый<br>двенадцатый</td></tr></table>
<div class="arrow2"></div></div></td></tr>
 
<tr><td><div class="marg"><div class="arrow1"></div>
<table><tr><td>тринадцатый<br>четырнадцатый</td></tr></table>
<div class="arrow2"></div></div></td>
 
<td rowspan="2"><div class="marg"><div class="arrow1"></div>
<table><tr><td>четырнадцатый<br>пятнадцатый</td></tr></table>
<div class="arrow2"></div></div></td></tr>
 
<tr><td><div class="marg"><div class="arrow1"></div>
<table><tr><td>пятнадцатый<br>шестнадцатый</td></tr></table>
<div class="arrow2"></div></div>
 
</td></tr></table>
 
</body>
</html>
Изображения
 
1
109 / 88 / 28
Регистрация: 21.08.2012
Сообщений: 371
12.07.2014, 21:36  [ТС]
newJS, выглядит прикольно, но не совсем то
0
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
13.07.2014, 06:32
Цитата Сообщение от Никита Однороб Посмотреть сообщение
но не совсем то
А совсем то, это как? скрин сделай, посмотрим.
0
109 / 88 / 28
Регистрация: 21.08.2012
Сообщений: 371
13.07.2014, 12:44  [ТС]
Цитата Сообщение от newJS Посмотреть сообщение
А совсем то, это как? скрин сделай, посмотрим
Вот как я сделал. Здесь я сделал сетку в экселе и просто переконвертировал её. Но полученный код это ужас: http://pastebin.com/VkJy8B3b (выкладываю код не здесь потому что тут лимит 20000 символов, а в коде больше
Миниатюры
Сделать турнирную сетку  
0
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
13.07.2014, 21:09
Цитата Сообщение от Никита Однороб Посмотреть сообщение
Вот как я сделал.
и в чем разница?

Цитата Сообщение от Никита Однороб Посмотреть сообщение
Здесь я сделал сетку в экселе и просто переконвертировал её.
мелкомягкие генерят от 50% мусора, а в твоем случае мусора еще больше.
0
109 / 88 / 28
Регистрация: 21.08.2012
Сообщений: 371
13.07.2014, 21:38  [ТС]
newJS, ну что сетка должна выглядить как сетка Ладно, буду думать. Скорее всего придется программу какую-нибудь писать
0
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
13.07.2014, 21:47
Цитата Сообщение от Никита Однороб Посмотреть сообщение
ну что сетка должна выглядить как сетка
так ты хочешь морду лица как на картинке?

Цитата Сообщение от Никита Однороб Посмотреть сообщение
Ладно, буду думать.
чё тут думать, прыгать надо!

Цитата Сообщение от Никита Однороб Посмотреть сообщение
Скорее всего придется программу какую-нибудь писать
хорошая идея
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
13.07.2014, 21:47
Помогаю со студенческими работами здесь

Построить турнирную сетку для n пар участников некоего соревнования
Добрый день! Задача такая. Нужно построить турнирную сетку для n пар участников некоего соревнования. Для этого есть UserControl...

Сделать турнирную таблицу автоматом
Добрый день. Как можно организовать турнирную таблицу? (в 2х вариантах) Очки считаются так: 1 Вариант: 2-0=3 2-1=2 1-2=1 ...

Сделать турнирную таблицу автоматом
Добрый день. Как можно конкретно организовать турнирную таблицу в экселе? У меня таблица готова, вот когда след. игры играются и очки надо...

WPF. 3D графика. Как создать цветную сетку?!, одну сетку раскрасить в разные цвета...
Подскажите,люди добрые, как справится с WPF приложением....Чахну над XAML... Всевозможные самоучители поселили в моей голове светлую...

Сделать видимой сетку у таблицы
Имеется TableLayout внутри которого TableRow с TextView-шками. Однако сетка/разделитель не видна между ячейками. Как-нибудь можно включить...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru