1

i dont know how to create a cup tree with html and javascript. I have some columns for the rounds

Round 1 | Round 2 | Round 3 | Final

and than again three new columns for the matches

teamA
result
teamB


teamA
result
teamB


teamA
result
teamB

in te next columns the matches are less. I want to create the tree programmatic but i dont how to handle the different spaces between the macthes because in every round they are bigger. I dont know how to calculate that.

Does someone of you have an idea how to do that?

This is what i did until now

<div class="yui3-u-1-4 tourneyMatchColumn">
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
  <div class="match">
    <div class="home">sdsd</div>
    <div class="result">2:1</div>
    <div class="away">sdfedf</div>
  </div>
  <div class="matchspacerStart"> </div>
</div>
Brad Larson
  • 170,088
  • 45
  • 397
  • 571
Benjamin Meyer
  • 13
  • 3
  • 2
    what is a cup tree? you want to draw up some kind of tournament bracket in HTML? – jon_darkstar Mar 26 '11 at 23:16
  • 1
    @jon, [Here it is](http://www.chessdom.com/images/store/pairings-16055.jpg) – Snowbear Mar 26 '11 at 23:17
  • how many teams? only powers of 2 go smoothly, otherwise you need bye's – jon_darkstar Mar 26 '11 at 23:20
  • i wanna make it configurable between 8,16,32 and 64 teams – Benjamin Meyer Mar 26 '11 at 23:32
  • @blasteralfred - As a comment, you shouldn't insert an "edited by" comment when you edit something in from a follow-on answer. Just try to integrate the new content as if they had written it in the first place. We can see who edited from the revision history. – Brad Larson Aug 18 '12 at 14:47
  • @BradLarson. Thanks. I just made it to inform moderators / others to understand that the edit is not made by the OP and to make it easy for you guys to understand the part I attached. I know that you guys will remove my name after a review, and "edited by" is definitely irrelevant. – Alfred Aug 18 '12 at 15:19
  • @blasteralfred - Actually, the only reason I saw this was due to your flag on the answer. Others won't, because we don't review every edit (we would be simply overwhelmed if we had to). It's best to edit things into their final shape and leave it at that. – Brad Larson Aug 18 '12 at 16:16

2 Answers2

2

I think a <table> is perfectly fine to use in this case. Here's some basic markup and formatting to get you started.

Demo: jsfiddle.net/Marcel/Qz3cq

Community
  • 1
  • 1
Marcel
  • 27,922
  • 9
  • 70
  • 85
0

See Drawing a tournament bracket

Community
  • 1
  • 1
bnieland
  • 6,047
  • 4
  • 40
  • 66