[SOLVED] Function/Loop?

twilitegxa · July 29, 2009

I have a simple select list that I would like to have repeated if a user clicks a link. I'm not sure exactly how to do this. I think I'm on the right track, but can anyone help me out? I need it to repeat two select fields if the users clicks the link. Here is what I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function addAttribute() {
return ("<table>
<tr>
<td>
<select name="attribute" size="1">
<option value="Animal Guardian">Animal Guardian</option>
<option value="Elemental Control">Elemental Control</option>
<option value="Item Of Power">Item Of Power</option>
<option value="Rejuvenation">Rejuvenation</option>
<option value="Combined Attacks">Combined Attacks</option>
<option value="Emotional Control">Emotional Control</option>
<option value="Knight Attack">Knight Attack</option>
<option value="Sailor Scout Attack">Sailor Scout Attack</option>
</select></td>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select></td>
</tr></table>")
}
</script>
</head>

<body>
<h1>Chapter 2: Character Creation</h1>
<h2>Scout/Knight Sub-Attributes</h2>
<table>
<th>Sub-Attribute</th>
<th>Level</th>
<tr>
<td>
<select name="attribute" size="1">
<option value="Animal Guardian">Animal Guardian</option>
<option value="Elemental Control">Elemental Control</option>
<option value="Item Of Power">Item Of Power</option>
<option value="Rejuvenation">Rejuvenation</option>
<option value="Combined Attacks">Combined Attacks</option>
<option value="Emotional Control">Emotional Control</option>
<option value="Knight Attack">Knight Attack</option>
<option value="Sailor Scout Attack">Sailor Scout Attack</option>
</select></td>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select></td>
</tr>
</table>

<p>Add another <a href="#" onclick="addAttribute()">Sub-Attribute</a>?</p>
</body>
</html>

I know it's not right, but I need someone to help me out with how I can do this.

twilitegxa · July 29, 2009

Someone said I could use some with jquery, maybe using the clone function. Can someone help point me in the right direction?

RichardRotterdam · July 29, 2009

If it's gonna be jQuery

the manual has a nice description and examples

jQuery clone

And a previous topic using the jQuery clone function

http://www.phpfreaks.com/forums/index.php/topic,254753.0.html

twilitegxa · July 30, 2009

Is there another way to do this without using jquery?

twilitegxa · July 30, 2009

Is there a way I can use this code to do it? I have it in my head section, but it's not working for some reason. Can anyone tell me why?

$('.button').click(function(){
  var newRow = $('table tbody tr:last').clone();
  $('table tbody').append(newRow);

});

Here is what I have total:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>

$('button').click(function(){
  var newRow = $('table td tr:last').clone(true);
  $('table td').append(newRow);

}); 

  </script>


</head>

<body>
<h1>Chapter 2: Character Creation</h1>
<h2>Scout/Knight Sub-Attributes</h2>
<table>
<th>Sub-Attribute</th>
<th>Level</th>
<tr>
<td>
<select name="attribute" size="1">
<option value="Animal Guardian">Animal Guardian</option>
<option value="Elemental Control">Elemental Control</option>
<option value="Item Of Power">Item Of Power</option>
<option value="Rejuvenation">Rejuvenation</option>
<option value="Combined Attacks">Combined Attacks</option>
<option value="Emotional Control">Emotional Control</option>
<option value="Knight Attack">Knight Attack</option>
<option value="Sailor Scout Attack">Sailor Scout Attack</option>
</select></td>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select></td>
</tr>
</table><br />

<button>Add Sub-Attribute</button>


</body>
</html>

twilitegxa · July 30, 2009

I found this code and it works :-)

function addRowClone(tblId)

{

var tblBody = document.getElementById(tblId).tBodies[0];

var newNode = tblBody.rows[0].cloneNode(true);

tblBody.appendChild(newNode);

}

Sign In

[SOLVED] Function/Loop?

Recommended Posts

twilitegxa

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

twilitegxa

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information