...

View Full Version : Add pre-coded table row when link is clicked



jcbarr
08-02-2006, 02:06 AM
Okay I want to add content to my page with the simple click of a link. I don't know if java can do this, but I thought that someone here might be able to help me do it.

Okay so the code looks like this;


<table align="center" cellpadding="4" border="1">
<tr>
<td colspan="4" bgcolor="#3399FF" align="center"><b>UNION LEAGUE</b></td>
</tr>
<tr>
<td bgcolor="#FFFFCC" align="center"><b>POS</b></td>
<td bgcolor="#FFFFCC" align="center"><b>PLAYER</b></td>
<td bgcolor="#FFFFCC" align="center"><b>STAT LINE</b></td>
</tr>
<form method="post" action="allstar.php?ADD=Y">
<tr>
<td bgcolor="#FFFFCC" align="center"><select name="pos[]">
<option>P
<option>C
<option>1B
<option>2B
<option>3B
<option>SS
<option>LF
<option>CF
<option>RF</select>
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="text" name="stat[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<a href="addnext">Add</a>
</td>
</tr>
<tr>
<td colspan="4" align="center" valign="middle" bgcolor="#FFFFFF">
<input type="submit" value="SUBMIT"></form>
</td>
</tr>

When people click on the <a href="addnext">Add[/url] I would like it to add another table row containg the same information as the previous one, and so forth so that users can add as many rosws as they want.

Not quite sure how to do this, anyone got any ideas?

vwphillips
08-02-2006, 11:08 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function AddRow(zxcid,zxcc){
var tbdy=document.getElementById(zxcid);
var clone=tbdy.rows[zxcc].cloneNode(true);
tbdy.appendChild(clone);
}
//-->
</script>
</head>

<body>
<table align="center" cellpadding="4" border="1">
<tbody id="T1" >
<tr>
<td colspan="4" bgcolor="#3399FF" align="center"><b>UNION LEAGUE</b></td>
</tr>
<tr>
<td bgcolor="#FFFFCC" align="center"><b>POS</b></td>
<td bgcolor="#FFFFCC" align="center"><b>PLAYER</b></td>
<td bgcolor="#FFFFCC" align="center"><b>STAT LINE</b></td>
</tr>
<form method="post" action="allstar.php?ADD=Y">
<tr>
<td bgcolor="#FFFFCC" align="center"><select name="pos[]">
<option>P
<option>C
<option>1B
<option>2B
<option>3B
<option>SS
<option>LF
<option>CF
<option>RF</select>
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="text" name="stat[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<span onclick="AddRow('T1',2); return false;" >Add</span>
</td>
</tr>
</tbody>
<tr>
<td colspan="4" align="center" valign="middle" bgcolor="#FFFFFF">
<input type="submit" value="SUBMIT"></form>
</td>
</tr>
</form>
</body>

</html>

jcbarr
08-02-2006, 01:53 PM
That works for adding the rows visually, but is there any way for it actually "add" the rows so that the form will send the variables? As of right now it only sends the first row that shows up on the page, the rest are just there, they don't actually send any information when you hit submit.

vwphillips
08-02-2006, 02:25 PM
please and thank you are good


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function AddRow(){
var zxcevt=window.event||arguments.callee.caller.arguments[0];
var zxcobj=zxcEventObj(zxcevt);
zxcobj.style.visibility='hidden';
var zxctbdy,zxcrow;
while (zxcobj.parentNode){
if (zxcobj.tagName=='TR'){ zxcrow=zxcobj; }
if (zxcobj.tagName=='TBODY'){ zxctbdy=zxcobj; break; }
zxcobj=zxcobj.parentNode;
}
var zxcrows=zxctbdy.rows;
for (var zxc0=0;zxc0<zxcrows.length-1;zxc0++){
if (zxcrows[zxc0]==zxcrow&&zxcrows[zxc0+1].style.display=='none'){ //
zxcrows[zxc0+1].style.display='';
}
}

}

function zxcEventObj(zxce){
if (!zxce) var zxce=window.event;
zxce.cancelBubble=true;
if (zxce.stopPropagation) zxce.stopPropagation();
if (zxce.target) zxceobj=zxce.target;
else if (zxce.srcElement) zxceobj=zxce.srcElement;
if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
return zxceobj;
}


//-->
</script>
</head>

<body>
<table align="center" cellpadding="4" border="1">
<tbody id="T1" >
<tr>
<td colspan="4" bgcolor="#3399FF" align="center"><b>UNION LEAGUE</b></td>
</tr>
<tr>
<td bgcolor="#FFFFCC" align="center"><b>POS</b></td>
<td bgcolor="#FFFFCC" align="center"><b>PLAYER</b></td>
<td bgcolor="#FFFFCC" align="center"><b>STAT LINE</b></td>
</tr>
<form method="post" action="allstar.php?ADD=Y">
<tr>
<td bgcolor="#FFFFCC" align="center"><select name="pos[]">
<option>P
<option>C
<option>1B
<option>2B
<option>3B
<option>SS
<option>LF
<option>CF
<option>RF</select>
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="text" name="stat[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<span onclick="AddRow(); return false;" >Add</span>
</td>
</tr>
<tr style="display:none;" >
<td bgcolor="#FFFFCC" align="center"><select name="pos[]">
<option>P
<option>C
<option>1B
<option>2B
<option>3B
<option>SS
<option>LF
<option>CF
<option>RF</select>
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="text" name="stat[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<span onclick="AddRow(); return false;" >Add</span>
</td>
</tr>
<tr style="display:none;" >
<td bgcolor="#FFFFCC" align="center"><select name="pos[]">
<option>P
<option>C
<option>1B
<option>2B
<option>3B
<option>SS
<option>LF
<option>CF
<option>RF</select>
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="text" name="stat[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<span onclick="AddRow(); return false;" >Add</span>
</td>
</tr>
<tr style="display:none;" >
<td bgcolor="#FFFFCC" align="center"><select name="pos[]">
<option>P
<option>C
<option>1B
<option>2B
<option>3B
<option>SS
<option>LF
<option>CF
<option>RF</select>
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="text" name="stat[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<span onclick="AddRow(); return false;" >Add</span>
</td>
</tr>
<tr style="display:none;" >
<td bgcolor="#FFFFCC" align="center"><select name="pos[]">
<option>P
<option>C
<option>1B
<option>2B
<option>3B
<option>SS
<option>LF
<option>CF
<option>RF</select>
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="hidden" name="league[]" value="UL"><input type="text" name="player[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<input type="text" name="stat[]">
</td>
<td bgcolor="#FFFFCC" align="center">
<span >&nbsp;</span>
</td>
</tr>
<tr>
<td colspan="4" align="center" valign="middle" bgcolor="#FFFFFF">
<input type="submit" value="SUBMIT"></form>
</td>
</tr>
</tbody>
</form>
</body>

</html>

jcbarr
08-02-2006, 02:47 PM
I'm sorry about that.

Thanks a ton for helping me out. This is a great help. I had no clue how to go about this myself.

This code works wonderfully, I was wondering if there is any way to do this without actually coding all the table rows into the page?

If not I understand and everything you have showed me so far is great.

Thanks for all your help.

vwphillips
08-02-2006, 03:09 PM
if there is any way to do this without actually coding all the table rows into

would have thougth first code would work, so wanted to make sure without having to fully test submission

jcbarr
08-02-2006, 07:39 PM
The first code works, but the form elements don't actually send anything. I am sending the form elements to a php script. The first example you gave only actually submits the data from the first row. The second one works, but still won't fix the problem of having to code all the table rows in and then hide them with the script.

Anyone else have any ideas on how to do this?

Thanks Vic for all your help so far.

vwphillips
08-02-2006, 08:08 PM
and then hide them with the script.

they are hidden with <tr style="display:none;" > in the html

also php echo can generate the required rows

jcbarr
08-02-2006, 09:39 PM
they are hidden with <tr style="display:none;" > in the html

also php echo can generate the required rows

I understand that. I know that php echo can generate the required rows, but the problem is this. I don't want to have to code them all in to the page, and I don't want to have to code all the echo statements. I was looking for a script that could actually add the code the page when the link is clicked.

Hope that clears it up a bit.

Thanks.

vwphillips
08-02-2006, 09:58 PM
ode all the echo statements

these would be in a simple loop.

The use of [] in the field names is not valid/meet W3C recomendations

so not sure that I can offer any further assistance.

jcbarr
08-02-2006, 10:28 PM
Okay, you did help though. The use of the [] in the form field names is so that I can grab them all in an array and then use a loop to perfrom actions with them.

Thanks for everything. It has served its purpose for now.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum