frizzle wrote:
Thanks for the reply,
i tried it, but this isn't completely what
i mean ... :-(
What i meant was
********* U G L Y V I S U A L M O D E *********
txt_field goals: [___________2] // should be an integer, e.g. 2
dropdown players:
goal 1: [Pele_______V]
goal 2: [Pele_______V]
|Maradonna |
|Beckham___|
****** / / U G L Y V I S U A L M O D E ******
I want to keep track of who scored what goal. I hope this
is more clear, and not to much to ask ...
Thanks,
Frizzzle.
Sorry, I just don't like the 'enter a number' bit. The following uses a
button to add and delete goals. It needs some work to make it suitable
for the web, it's dependent on the page structure and naming
conventions, but it gives you a start:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Goal scorers</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
table { border-collapse: collapse;}
td {vertical-align: top;}
select {width: 10em; margin: 5px 0px 0px 5px;}
input {width: 10em;}
..goalCell {
text-align: right;
padding-left: 5px;
border: 1px solid green;
}
</style>
<script type="text/javascript">
// Get the last select element with id containing 'goal-'
// Goes thru elements from last to first, returns first match
function getLastGoal( f )
{
var el, els = f.elements;
var i = els.length;
while ( i-- ){
el = els[i];
if ( el.id && /goal-/.test(el.id) ) {
return el;
}
}
}
// Return the first div that is a parent of el
function getDiv ( el )
{
while ( el.parentNode && 'div' != el.nodeName.toL owerCase() ){
el = el.parentNode;
}
return ('div' == el.nodeName.toL owerCase() )? el : null;
}
function addGoal( f )
{
// Get the last goal select element
var elG = getLastGoal( f );
// Get the parent div and clone the whole div
var elD = getDiv( elG );
if ( !elD ) return; // Didn't find a parent div
var newD = elD.cloneNode(t rue);
// Modify the new select element's id (can't have duplicates)
var newG = newD.getElement sByTagName('sel ect')[0];
var newId = newG.id.split('-');
newId[1] = +newId[1] + 1;
newG.id = newId[0] + '-' + newId[1];
// Modify the text
newD.firstChild .data = 'Goal ' + newId[1];
// Add the new Div
elD.parentNode. appendChild( newD );
}
function delGoal( f )
{
// Get the last goal select element
var elG = getLastGoal( f );
// If it's the last one, don't delete it
if ( 'goal-1' == elG.id ) return;
// Get the parent Div & delete last goal div
var elD = getDiv( elG );
elD.parentNode. removeChild( elD );
}
</script>
</head>
<body>
<form name="goalsScor ed" action="">
<table>
<tr>
<td>
<input type="button" value="Add new goal" onclick="
addGoal( this.form );
"><br>
<input type="button" value="Delete last goal" onclick="
delGoal( this.form );
"><br>
<input type="reset" value="clear form">
<td class="goalCell ">
<div>Goal 1
<select id="goal-1">
<option selected>
<option>Pelle
<option>Maradon na
<option>Beckh am
</select>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
--
Rob
