Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
Никита Однороб
109 / 89 / 28
Регистрация: 21.08.2012
Сообщений: 368
#1

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

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

Всем добрый день! Хочу сделать собственную турнирную систему, и первая проблема - сетки. Первой мыслью было сделать таблицу в Excel и переконвертировать ее в html. Сетка на 16 человек занимает 600 строк Если посмотреть исходный код здесь: http://www.tournamentservice.net/charts.php?chart=5, то тут гораздо меньший объем. Кто-нибудь может объяснить, как это сделано там? И как это сделать мне? Заранее спасибо
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.07.2014, 15:16
Ответы с готовыми решениями:

Сделать сетку по центру
Ребят, привет. Подскажите как сделать отображение сетки по центру ? ...

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

Как выбрать только сетку Bootstrap?
В общем при скачивании оставил отметку только на "Grid system". Однако в...

Как реализовать сетку с «неполным бордюром»?
Возникли проблемы с реализацией такой сетки Вот мой набросок -...

Cоздать свою сетку на подобии bootstrap
Как создать 12-ти колончатую сетку наподобие bootstrap.Чисто в учебных целях....

10
BarbosLV
363 / 401 / 165
Регистрация: 29.05.2014
Сообщений: 1,494
12.07.2014, 15:36 #2
Ну судя по всему там присутствует какой то програминг вероятно PHP, а так же БД скорее всего тоже есть. Как по ссылке одним HTML не обойтись однозначно.
1
Никита Однороб
109 / 89 / 28
Регистрация: 21.08.2012
Сообщений: 368
12.07.2014, 15:45  [ТС] #3
BarbosLV, ну понятное дело, что PHP. Но ведь PHP создаёт HTML и выводит его
0
BarbosLV
363 / 401 / 165
Регистрация: 29.05.2014
Сообщений: 1,494
12.07.2014, 16:08 #4
Ну а в чём вопрос тогда?
Вот у меня есть пример 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
newJS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
12.07.2014, 21:20 #5
Никита, а такое прокатит? как заполнять это другой разговор.
Или тебе не это нужно.
Кликните здесь для просмотра всего текста

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 / 89 / 28
Регистрация: 21.08.2012
Сообщений: 368
12.07.2014, 21:36  [ТС] #6
newJS, выглядит прикольно, но не совсем то
0
newJS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
13.07.2014, 06:32 #7
Цитата Сообщение от Никита Однороб Посмотреть сообщение
но не совсем то
А совсем то, это как? скрин сделай, посмотрим.
0
Никита Однороб
109 / 89 / 28
Регистрация: 21.08.2012
Сообщений: 368
13.07.2014, 12:44  [ТС] #8
Цитата Сообщение от newJS Посмотреть сообщение
А совсем то, это как? скрин сделай, посмотрим
Вот как я сделал. Здесь я сделал сетку в экселе и просто переконвертировал её. Но полученный код это ужас: http://pastebin.com/VkJy8B3b (выкладываю код не здесь потому что тут лимит 20000 символов, а в коде больше
0
Миниатюры
Сделать турнирную сетку  
newJS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
13.07.2014, 21:09 #9
Цитата Сообщение от Никита Однороб Посмотреть сообщение
Вот как я сделал.
и в чем разница?

Цитата Сообщение от Никита Однороб Посмотреть сообщение
Здесь я сделал сетку в экселе и просто переконвертировал её.
мелкомягкие генерят от 50% мусора, а в твоем случае мусора еще больше.
0
Никита Однороб
109 / 89 / 28
Регистрация: 21.08.2012
Сообщений: 368
13.07.2014, 21:38  [ТС] #10
newJS, ну что сетка должна выглядить как сетка Ладно, буду думать. Скорее всего придется программу какую-нибудь писать
0
newJS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
13.07.2014, 21:47 #11
Цитата Сообщение от Никита Однороб Посмотреть сообщение
ну что сетка должна выглядить как сетка
так ты хочешь морду лица как на картинке?

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

Цитата Сообщение от Никита Однороб Посмотреть сообщение
Скорее всего придется программу какую-нибудь писать
хорошая идея
0
13.07.2014, 21:47
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.07.2014, 21:47

Как подружить адаптивную сетку Bootstrap 3 и style.css?
Здравствуйте. Кто-нибудь знает, как задавать свои размеры блоков макета,...

Как использовать сетку Бутстрапа,чтоб по краям были пропорциональные отступы?
Есть задача сверстать страницу адаптивно с помощью сетки бутстрапа. Но...

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


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

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru