c＃如何生成锦标赛HTML表 [英] c# How to generate a tournament bracket HTML table
本文介绍了c＃如何生成锦标赛HTML表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我一直坚持这个问题，现在3个星期，我不能为我的生活想出来。
我试图做的是得到这种输出/演示文稿使用表。
http：// www.esl-world.net/masters/season6/hanover/sc2/playoffs/rankings/
这是一个踢球比赛的包围系统。
所以我的模型看起来像这样
public class Match {
public int id {get; set; }
public int teamid1 {get; set;}
public int teamid2 {get; set;}
public int roundnumber {get; set;}
public int winner { set;}
}
所以，我现在做的是i循环（int r = 1; r< bracketRounds; r ++）中，我将这样做
{
for（m = 1; m< roundMatches +1; m ++）{
matchGroup =< tr>< td> + team1 +< / td>< / tr>
+< tr>< td> vs< / td>< / tr>
+< tr>< td> + team2 +< / td>< / tr>;
}
}
但是这只会产生一个1列表将显示所有的匹配。想知道是否有人可以帮助/指向我正确的方向，如何我应该这样做，以便我可以插入后面的行在第一行的右侧，所以它将有一个括号像ouput。
谢谢！
解决方案
我已经测试了2，3和4轮比赛的代码。 2轮和3轮比赛的输出如下所示：
我使用相同的模型您提供定义匹配。我添加了一个 Tournament 类来生成测试数据。
Match.cs - 模型
using System.Collections.Generic;
using System.Linq;
using System.Text;
命名空间比赛
{
public class Match
{
public int id {get;组; }
public int teamid1 {get;组; }
public int teamid2 {get;组; }
public int roundnumber {get;组; }
public int winner {get;组; }
public Match（int id，int teamid1，int teamid2，int roundnumber，int winner）
{
this.id = id;
this.teamid1 = teamid1;
this.teamid2 = teamid2;
this.roundnumber = roundnumber;
this.winner = winner;
}
}
public class Tournament
{
public SortedList< int，SortedList< int，Match> TournamentRoundMatches {get;私人集}
public Match ThirdPlaceMatch {get;私人集}
public Tournament（int rounds）
{
this.TournamentRoundMatches = new SortedList< int，SortedList< int，Match>
this.GenerateTournamentResults（rounds）;
if（rounds> 1）
{
this.GenerateThirdPlaceResult（rounds）;
}
}
public void AddMatch（Match m）
{
if（this.TournamentRoundMatches.ContainsKey（m.roundnumber））
{
if（！this.TournamentRoundMatches [m.roundnumber] .ContainsKey（m.id））
{
this.TournamentRoundMatches [m.roundnumber] .Add（m.id，m ）;
}
}
else
{
this.TournamentRoundMatches.Add（m.roundnumber，new SortedList< int，Match>（））;
this.TournamentRoundMatches [m.roundnumber] .Add（m.id，m）;
}
}
private void GenerateTournamentResults（int rounds）
{
Random WinnerRandomizer = new Random（）;
for（int round = 1，match_id = 1; round <= rounds; round ++）
{
int matches_in_round = 1< （rounds-round）;
for（int round_match = 1; round_match< = matches_in_round; round_match ++，match_id ++）
{
int team1_id;
int team2_id;
int winner;
if（round == 1）
{
team1_id =（match_id * 2） - 1;
team2_id =（match_id * 2）;
}
else
{
int match1 =（match_id - （matches_in_round * 2）+（round_match - 1））;
int match2 = match1 + 1;
team1_id = this.TournamentRoundMatches [round - 1] [match1] .winner;
team2_id = this.TournamentRoundMatches [round-1] [match2] .winner;
}
winner =（WinnerRandomizer.Next（1，3）== 1）？ team1_id：team2_id;
this.AddMatch（new Match（match_id，team1_id，team2_id，round，winner））;
}
}
}
private void GenerateThirdPlaceResult（int rounds）
{
Random WinnerRandomizer = new Random（）;
int semifinal_matchid1 = this.TournamentRoundMatches [rounds - 1] .Keys.ElementAt（0）;
int semifinal_matchid2 = this.TournamentRoundMatches [rounds - 1] .Keys.ElementAt（1）;
Match semifinal_1 = this.TournamentRoundMatches [rounds - 1] [semifinal_matchid1];
Match semifinal_2 = this.TournamentRoundMatches [rounds - 1] [semifinal_matchid2];
int semifinal_loser1 =（semifinal_1.winner == semifinal_1.teamid1）？ semifinal_1.teamid2：semifinal_1.teamid1;
int semifinal_loser2 =（semifinal_2.winner == semifinal_2.teamid1）？ semifinal_2.teamid2：semifinal_2.teamid1;
int third_place_winner =（WinnerRandomizer.Next（1，3）== 1）？ semifinal_loser1：semifinal_loser2;
this.ThirdPlaceMatch = new Match（（1<< rounds）+ 1，semifinal_loser1，semifinal_loser2,1，third_place_winner）;
}
}
}
我使用静态方法 GenerateHTMLResultsTable 动态生成了原始HTML。这只需使用< table> ，而不需要< div> b
$ b
Program.cs - 初始化测试数据并生成HTML的静态Program类
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
命名空间比赛
{
类程序
{
静态字符串GenerateHTMLResultsTable（比赛锦标赛）
{
int match_white_span;
int match_span;
int position_in_match_span;
int column_stagger_offset;
int effective_row;
int col_match_num;
int cumulative_matches;
int effective_match_id;
int rounds = tournament.TournamentRoundMatches.Count;
int teams = 1<<回合
int max_rows = teams<< 1;
StringBuilder HTMLTable = new StringBuilder（）;
HTMLTable.AppendLine（< style type = \text / css \>）;
HTMLTable.AppendLine（.thd {background：rgb（220,220,220）; font：bold 10pt Arial; text-align：center;}）;
HTMLTable.AppendLine（.team {color：white; background：rgb（100,100,100）; font：bold 10pt Arial; border-right：solid 2px black;}）;
HTMLTable.AppendLine（.winner {color：white; background：rgb（60,60,60）; font：bold 10pt Arial;}）;
HTMLTable.AppendLine（.vs {font：bold 7pt Arial; border-right：solid 2px black;}）;
HTMLTable.AppendLine（td，th {padding：3px 15px; border-right：dotted 2px rgb（200,200,200）; text-align：right;}）;
HTMLTable.AppendLine（h1 {font：bold 14pt Arial; margin-top：24pt;}）;
HTMLTable.AppendLine（< / style>）;
HTMLTable.AppendLine（< h1> Tournament Results< / h1>）;
HTMLTable.AppendLine（< table border = \0 \cellspacing = \0 \>）;
for（int row = 0; row< = max_rows; row ++）
{
cumulative_matches = 0;
HTMLTable.AppendLine（< tr>）;
for（int col = 1; col <= rounds + 1; col ++）
{
match_span = 1< （col + 1）;
match_white_span =（1<< col） - 1;
column_stagger_offset = match_white_span>> 1;
if（row == 0）
{
if（col <= rounds）
{
HTMLTable.AppendLine（< th class = \ thd \> Round+ col +< / th>）;
}
else
{
HTMLTable.AppendLine（< th class = \thd \> Winner< / th>）;
}
}
else if（row == 1）
{
HTMLTable.AppendLine（< td class = \white_span\rowspan = \+（match_white_span - column_stagger_offset）+\>& nbsp;< / td>）;
}
else
{
effective_row = row + column_stagger_offset;
if（col <= rounds）
{
position_in_match_span = effective_row％match_span;
position_in_match_span =（position_in_match_span == 0）？ match_span：position_in_match_span;
col_match_num =（effective_row / match_span）+（（position_in_match_span< match_span）？1：0）;
effective_match_id = cumulative_matches + col_match_num;
if（（position_in_match_span == 1）&&（effective_row％match_span == position_in_match_span））
{
HTMLTable.AppendLine（< td class = \white_span\ rowspan = \+ match_white_span +\>& nbsp;< / td>）;
}
else if（（position_in_match_span ==（match_span>> 1））&&（effective_row％match_span == position_in_match_span）
{
HTMLTable.AppendLine （< td class = \team\> Team+ tournament.TournamentRoundMatches [col] [effective_match_id] .teamid1 +< / td>）;
}
else if（（position_in_match_span ==（（match_span> 1）+ 1））&& b HTMLTable.AppendLine（< td class = \vs\rowspan = \+ match_white_span +\> VS< / td>）;
}
else if（（position_in_match_span == match_span）&&（effective_row％match_span == 0））
{
HTMLTable.AppendLine（< td class = \team\> Team+ tournament.TournamentRoundMatches [col] [effective_match_id] .teamid2 +< / td>）;
}
}
else
{
if（row == column_stagger_offset + 2）
{
HTMLTable.AppendLine（< td class = \winner\> Team+ tournament.TournamentRoundMatches [rounds] [cumulative_matches] .winner +< / td>）;
}
else if（row == column_stagger_offset + 3）
{
HTMLTable.AppendLine（< td class = \white_span\rowspan = \ +（match_white_span - column_stagger_offset）+\>& nbsp;< / td>）;
}
}
}
if（col <= rounds）
{
cumulative_matches + = tournament.TournamentRoundMatches [col] .Count;
}
}
HTMLTable.AppendLine（< / tr>）;
}
HTMLTable.AppendLine（< / table>）;
HTMLTable.AppendLine（< h1> Third Place Results< / h1>）;
HTMLTable.AppendLine（< table border = \0 \cellspacing = \0 \>）;
HTMLTable.AppendLine（< tr>）;
HTMLTable.AppendLine（< th class = \thd \> Round 1< / th>）;
HTMLTable.AppendLine（< th class = \thd \> Third Place< / th>）;
HTMLTable.AppendLine（< / tr>）;
HTMLTable.AppendLine（< tr>）;
HTMLTable.AppendLine（< td class = \white_span \>& nbsp;< / td>）;
HTMLTable.AppendLine（< td class = \white_span\rowspan = \2 \>& nbsp;< / td>）;
HTMLTable.AppendLine（< / tr>）;
HTMLTable.AppendLine（< tr>）;
HTMLTable.AppendLine（< td class = \team\> Team+ tournament.ThirdPlaceMatch.teamid1 +< / td>）;
HTMLTable.AppendLine（< / tr>）;
HTMLTable.AppendLine（< tr>）;
HTMLTable.AppendLine（< td class = \vs\> VS< / td>）;
HTMLTable.AppendLine（< td class = \winner\> Team+ tournament.ThirdPlaceMatch.winner +< / td>）;
HTMLTable.AppendLine（< / tr>）;
HTMLTable.AppendLine（< tr>）;
HTMLTable.AppendLine（< td class = \team\> Team+ tournament.ThirdPlaceMatch.teamid2 +< / td>）;
HTMLTable.AppendLine（< td class = \white_span \>& nbsp;< / td>）;
HTMLTable.AppendLine（< / tr>）;
HTMLTable.AppendLine（< / table>）;
return HTMLTable.ToString（）;
}
static void Main（string [] args）
{
Tournament Test3RoundTournament = new Tournament（3）
Tournament Test2RoundTournament = new Tournament（2）;
File.WriteAllText（@C：\Tournament\results.html，GenerateHTMLResultsTable（Test2RoundTournament））;
File.WriteAllText（@C：\Tournament\results.html，GenerateHTMLResultsTable（Test3RoundTournament））;
Console.ReadLine（）;
}
}
}
UPDATE
用于生成HTML表格的参数说明
$ b
>
正如你所看到的， column_stagger_offset 是每个列向上移动的数量，以使它们按照它们的方式对齐。 effective_row 本质上就是特定表单元格在没有垂直移位的情况下。知道 effective_row 和 position_in_match_span 有助于确定需要在该特定单元格中显示什么（blank，team1，team2，或vs。）。
正如你所注意到的，我每次迭代一行一行。这似乎是最自然的，考虑到HTML表也是这样构造的，即创建行，添加单元格...创建行，添加cels ...等。
so i have been stuck with this issue for 3 weeks now and i couldn't for the life of me figure it out. what im trying to do is to get this kind of output/presentation using tables.
http://www.esl-world.net/masters/season6/hanover/sc2/playoffs/rankings/
it's a bracketing system for a kickball tournament. so my model looks like this
public class Match{
public int id {get;set;}
public int teamid1 {get;set;}
public int teamid2 {get;set;}
public int roundnumber {get;set;}
public int winner {get;set;}
}
so, what i'm doing now is i loop through the rounds first say, there are for rounds i would do this
for(int r = 1; r < bracketRounds; r++){
for(m = 1; m < roundMatches +1; m++){
matchGroup = "<tr><td>" + team1 + "</td></tr>"
+ "<tr><td>vs</td></tr>"
+ "<tr><td>" + team2 + "</td></tr>";
}
}
but then this would just produce a 1 column table that will show all the matches. was wondering if anyone could help / point me to the right direction as to how i should approach this so that i can insert the subsequent rows to the right of the first row so it'll have a bracket like ouput.
thanks!
解决方案
Here's my attempt. I have tested the code for 2, 3, and 4 Round Tournaments. The outputs for a 2-Round and 3-Round tournament are shown here:
I have used the same model that you provided to define a Match. I have added a Tournament class to generate test data.
Match.cs - The class containing the models
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
namespace tournament
{
public class Match
{
public int id { get; set; }
public int teamid1 { get; set; }
public int teamid2 { get; set; }
public int roundnumber { get; set; }
public int winner { get; set; }
public Match(int id, int teamid1, int teamid2, int roundnumber, int winner)
{
this.id = id;
this.teamid1 = teamid1;
this.teamid2 = teamid2;
this.roundnumber = roundnumber;
this.winner = winner;
}
}
public class Tournament
{
public SortedList<int, SortedList<int, Match>> TournamentRoundMatches { get; private set; }
public Match ThirdPlaceMatch { get; private set; }
public Tournament(int rounds)
{
this.TournamentRoundMatches = new SortedList<int, SortedList<int, Match>>();
this.GenerateTournamentResults(rounds);
if (rounds > 1)
{
this.GenerateThirdPlaceResult(rounds);
}
}
public void AddMatch(Match m)
{
if (this.TournamentRoundMatches.ContainsKey(m.roundnumber))
{
if (!this.TournamentRoundMatches[m.roundnumber].ContainsKey(m.id))
{
this.TournamentRoundMatches[m.roundnumber].Add(m.id, m);
}
}
else
{
this.TournamentRoundMatches.Add(m.roundnumber, new SortedList<int, Match>());
this.TournamentRoundMatches[m.roundnumber].Add(m.id, m);
}
}
private void GenerateTournamentResults(int rounds)
{
Random WinnerRandomizer = new Random();
for (int round = 1, match_id = 1; round <= rounds; round++)
{
int matches_in_round = 1 << (rounds - round);
for (int round_match = 1; round_match <= matches_in_round; round_match++, match_id++)
{
int team1_id;
int team2_id;
int winner;
if (round == 1)
{
team1_id = (match_id * 2) - 1;
team2_id = (match_id * 2);
}
else
{
int match1 = (match_id - (matches_in_round * 2) + (round_match - 1));
int match2 = match1 + 1;
team1_id = this.TournamentRoundMatches[round - 1][match1].winner;
team2_id = this.TournamentRoundMatches[round - 1][match2].winner;
}
winner = (WinnerRandomizer.Next(1, 3) == 1) ? team1_id : team2_id;
this.AddMatch(new Match(match_id, team1_id, team2_id, round, winner));
}
}
}
private void GenerateThirdPlaceResult(int rounds)
{
Random WinnerRandomizer = new Random();
int semifinal_matchid1 = this.TournamentRoundMatches[rounds - 1].Keys.ElementAt(0);
int semifinal_matchid2 = this.TournamentRoundMatches[rounds - 1].Keys.ElementAt(1);
Match semifinal_1 = this.TournamentRoundMatches[rounds - 1][semifinal_matchid1];
Match semifinal_2 = this.TournamentRoundMatches[rounds - 1][semifinal_matchid2];
int semifinal_loser1 = (semifinal_1.winner == semifinal_1.teamid1) ? semifinal_1.teamid2 : semifinal_1.teamid1;
int semifinal_loser2 = (semifinal_2.winner == semifinal_2.teamid1) ? semifinal_2.teamid2 : semifinal_2.teamid1;
int third_place_winner = (WinnerRandomizer.Next(1, 3) == 1) ? semifinal_loser1 : semifinal_loser2;
this.ThirdPlaceMatch = new Match((1 << rounds) + 1, semifinal_loser1, semifinal_loser2, 1, third_place_winner);
}
}
}
I have generated the raw HTML dynamically using the static method GenerateHTMLResultsTable. This was done using only <table> without any need for <div> blocks.
Program.cs - The static Program class that initializes test data and generates the HTML
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
namespace tournament
{
class Program
{
static string GenerateHTMLResultsTable(Tournament tournament)
{
int match_white_span;
int match_span;
int position_in_match_span;
int column_stagger_offset;
int effective_row;
int col_match_num;
int cumulative_matches;
int effective_match_id;
int rounds = tournament.TournamentRoundMatches.Count;
int teams = 1 << rounds;
int max_rows = teams << 1;
StringBuilder HTMLTable = new StringBuilder();
HTMLTable.AppendLine("<style type=\"text/css\">");
HTMLTable.AppendLine(" .thd {background: rgb(220,220,220); font: bold 10pt Arial; text-align: center;}");
HTMLTable.AppendLine(" .team {color: white; background: rgb(100,100,100); font: bold 10pt Arial; border-right: solid 2px black;}");
HTMLTable.AppendLine(" .winner {color: white; background: rgb(60,60,60); font: bold 10pt Arial;}");
HTMLTable.AppendLine(" .vs {font: bold 7pt Arial; border-right: solid 2px black;}");
HTMLTable.AppendLine(" td, th {padding: 3px 15px; border-right: dotted 2px rgb(200,200,200); text-align: right;}");
HTMLTable.AppendLine(" h1 {font: bold 14pt Arial; margin-top: 24pt;}");
HTMLTable.AppendLine("</style>");
HTMLTable.AppendLine("<h1>Tournament Results</h1>");
HTMLTable.AppendLine("<table border=\"0\" cellspacing=\"0\">");
for (int row = 0; row <= max_rows; row++)
{
cumulative_matches = 0;
HTMLTable.AppendLine(" <tr>");
for (int col = 1; col <= rounds + 1; col++)
{
match_span = 1 << (col + 1);
match_white_span = (1 << col) - 1;
column_stagger_offset = match_white_span >> 1;
if (row == 0)
{
if (col <= rounds)
{
HTMLTable.AppendLine(" <th class=\"thd\">Round " + col + "</th>");
}
else
{
HTMLTable.AppendLine(" <th class=\"thd\">Winner</th>");
}
}
else if (row == 1)
{
HTMLTable.AppendLine(" <td class=\"white_span\" rowspan=\"" + (match_white_span - column_stagger_offset) + "\"> </td>");
}
else
{
effective_row = row + column_stagger_offset;
if (col <= rounds)
{
position_in_match_span = effective_row % match_span;
position_in_match_span = (position_in_match_span == 0) ? match_span : position_in_match_span;
col_match_num = (effective_row / match_span) + ((position_in_match_span < match_span) ? 1 : 0);
effective_match_id = cumulative_matches + col_match_num;
if ((position_in_match_span == 1) && (effective_row % match_span == position_in_match_span))
{
HTMLTable.AppendLine(" <td class=\"white_span\" rowspan=\"" + match_white_span + "\"> </td>");
}
else if ((position_in_match_span == (match_span >> 1)) && (effective_row % match_span == position_in_match_span))
{
HTMLTable.AppendLine(" <td class=\"team\">Team " + tournament.TournamentRoundMatches[col][effective_match_id].teamid1 + "</td>");
}
else if ((position_in_match_span == ((match_span >> 1) + 1)) && (effective_row % match_span == position_in_match_span))
{
HTMLTable.AppendLine(" <td class=\"vs\" rowspan=\"" + match_white_span + "\">VS</td>");
}
else if ((position_in_match_span == match_span) && (effective_row % match_span == 0))
{
HTMLTable.AppendLine(" <td class=\"team\">Team " + tournament.TournamentRoundMatches[col][effective_match_id].teamid2 + "</td>");
}
}
else
{
if (row == column_stagger_offset + 2)
{
HTMLTable.AppendLine(" <td class=\"winner\">Team " + tournament.TournamentRoundMatches[rounds][cumulative_matches].winner + "</td>");
}
else if (row == column_stagger_offset + 3)
{
HTMLTable.AppendLine(" <td class=\"white_span\" rowspan=\"" + (match_white_span - column_stagger_offset) + "\"> </td>");
}
}
}
if (col <= rounds)
{
cumulative_matches += tournament.TournamentRoundMatches[col].Count;
}
}
HTMLTable.AppendLine(" </tr>");
}
HTMLTable.AppendLine("</table>");
HTMLTable.AppendLine("<h1>Third Place Results</h1>");
HTMLTable.AppendLine("<table border=\"0\" cellspacing=\"0\">");
HTMLTable.AppendLine(" <tr>");
HTMLTable.AppendLine(" <th class=\"thd\">Round 1</th>");
HTMLTable.AppendLine(" <th class=\"thd\">Third Place</th>");
HTMLTable.AppendLine(" </tr>");
HTMLTable.AppendLine(" <tr>");
HTMLTable.AppendLine(" <td class=\"white_span\"> </td>");
HTMLTable.AppendLine(" <td class=\"white_span\" rowspan=\"2\"> </td>");
HTMLTable.AppendLine(" </tr>");
HTMLTable.AppendLine(" <tr>");
HTMLTable.AppendLine(" <td class=\"team\">Team " + tournament.ThirdPlaceMatch.teamid1 + "</td>");
HTMLTable.AppendLine(" </tr>");
HTMLTable.AppendLine(" <tr>");
HTMLTable.AppendLine(" <td class=\"vs\">VS</td>");
HTMLTable.AppendLine(" <td class=\"winner\">Team " + tournament.ThirdPlaceMatch.winner + "</td>");
HTMLTable.AppendLine(" </tr>");
HTMLTable.AppendLine(" <tr>");
HTMLTable.AppendLine(" <td class=\"team\">Team " + tournament.ThirdPlaceMatch.teamid2 + "</td>");
HTMLTable.AppendLine(" <td class=\"white_span\"> </td>");
HTMLTable.AppendLine(" </tr>");
HTMLTable.AppendLine("</table>");
return HTMLTable.ToString();
}
static void Main(string[] args)
{
Tournament Test3RoundTournament = new Tournament(3);
Tournament Test2RoundTournament = new Tournament(2);
File.WriteAllText(@"C:\Tournament\results.html", GenerateHTMLResultsTable(Test2RoundTournament));
File.WriteAllText(@"C:\Tournament\results.html", GenerateHTMLResultsTable(Test3RoundTournament));
Console.ReadLine();
}
}
}
UPDATE
Explanation of Parameters Used to Generate the HTML Table
As you can see, the column_stagger_offset is the amount by which each column is shifted up to align them the way they are supposed to. The effective_row is essentially where the particular table cell would have been had there been no vertical shift. Knowing the effective_row and the position_in_match_span helps determine what needs to be shown in that particuar cell (blank, team1, team2, or vs.).
As you've noticed, I am iterating over the columns one row at a time. That seems most natural considering that HTML tables are also constructed that way, i.e. create row, add cells ... create row, add cels ... and so on.
这篇关于c＃如何生成锦标赛HTML表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
