Making links move to next cell

[jdubwelch]

So I'm making an online bracket submission form.

I'm just trying to get it to work based on a javascript code I've used for something similar before.

 

Basically, I want it so by clicking on the team you think will win, it will eventually end up in the "A15" cell.

 

As of now, with my code: I can only get it to write one round (into the A9 through A12 cells).

 

I'm pretty new at javascript and any help is great.  here's my javascript and html:

<script language="JavaScript" type="text/javascript">
<!--
function setWinner(clickedObjId,row,nextRow)
{
	document.getElementById('row'+row).innerHTML = '<a href="javascript:void(0);" onClick="setWinner(' + clickedObjId +',' + nextRow + ',13);" id="linkaway' + nextRow + '">' + clickedObjId +'</a>';
	document.getElementById('winner'+row).value = clickedObjId;
}

// -->
</script>
<form action="" method="post" name="myForm">
<table width="700" height="309" border="1" cellpadding="3" cellspacing="0">
  <tr>
    <th width="133" colspan="3"><a href="javascript:void(0);" onClick="setWinner('TeamA',9,13);" id="linkaway9">TeamA</a></th>
    <td width="194" rowspan="2" id="row9">A9</td>
    <td width="185" rowspan="4" id="row13">A13</td>
    <td width="188" rowspan="8" id="row15">A15</td>
  </tr>
  <tr>
    <td colspan="3"><a href="javascript:void(0);" onClick="setWinner('TeamB',9,13);" id="linkhome9">TeamB</a></td>
  </tr>
  <tr>
    <td colspan="3"><a href="javascript:void(0);" onClick="setWinner('TeamC',10,13);" id="linkaway10">TeamC</a></td>
    <td rowspan="2" id="row10">A10</td>
  </tr>
  <tr>
    <td colspan="3"><a href="javascript:void(0);" onClick="setWinner('TeamD',10,13);" id="linkhome10">TeamD</a></td>
  </tr>
  <tr>
    <td colspan="3"><a href="javascript:void(0);" onClick="setWinner('TeamE',11,14);" id="linkaway11">TeamE</a></td>
    <td rowspan="2" id="row11">A11</td>
    <td rowspan="4" id="row14">A14</td>
  </tr>
  <tr>
    <td colspan="3"><a href="javascript:void(0);" onClick="setWinner('TeamF',11,13);" id="linkhome11">TeamF</a></td>
  </tr>
  <tr>
    <td colspan="3"><a href="javascript:void(0);" onClick="setWinner('TeamG',12,14);" id="linkaway12">TeamG</a></td>
    <td rowspan="2" id="row12">A12</td>
  </tr>
  <tr>
    <td colspan="3"><a href="javascript:void(0);" onClick="setWinner('TeamH',12,14);" id="linkhome12">TeamH</a></td>
  </tr>
</table>
A9<input type="text" name="winner9" id="winner9" value="" /><br />  
A10<input type="text" name="winner10" id="winner10" value="" /><br /> 
A11<input type="text" name="winner11" id="winner11" value="" /><br /> 
A12<input type="text" name="winner12" id="winner12" value="" /><br /> 
A13<input type="text" name="winner13" id="winner13" value="" /><br /> 
A14<input type="text" name="winner14" id="winner14" value="" /><br /> 
A15<input type="text" name="winner15" id="winner15" value="" /><br /> 

<p>
  <input name="Submit" type="submit" value="Submit" />
</p>
</form>

 

[jdubwelch]

I got it to work.

 

function setWinner(clickedObjId,row,nextRow)
{
	var link1 = '<a href="javascript:void(0);" onClick="setWinner(\'' + clickedObjId + '\',' + nextRow + ',15);" id="linkaway' + nextRow + '">' + clickedObjId + '</a>';

	document.getElementById('row'+row).innerHTML = link1;
	document.getElementById('winner'+row).value = clickedObjId;
}