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 aTournamentclass to generate test data.Match.cs – The class containing the models
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
UPDATE
Explanation of Parameters Used to Generate the HTML Table
As you can see, the
column_stagger_offsetis the amount by which each column is shifted up to align them the way they are supposed to. Theeffective_rowis essentially where the particular table cell would have been had there been no vertical shift. Knowing theeffective_rowand theposition_in_match_spanhelps 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.