twilitegxa Posted July 29, 2009 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/167928-solved-functionloop/ Share on other sites More sharing options...
twilitegxa Posted July 29, 2009 Author Share Posted 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? Link to comment https://forums.phpfreaks.com/topic/167928-solved-functionloop/#findComment-885705 Share on other sites More sharing options...
RichardRotterdam Posted July 29, 2009 Share Posted 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 Link to comment https://forums.phpfreaks.com/topic/167928-solved-functionloop/#findComment-885746 Share on other sites More sharing options...
twilitegxa Posted July 30, 2009 Author Share Posted July 30, 2009 Is there another way to do this without using jquery? Link to comment https://forums.phpfreaks.com/topic/167928-solved-functionloop/#findComment-886485 Share on other sites More sharing options...
twilitegxa Posted July 30, 2009 Author Share Posted 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> Link to comment https://forums.phpfreaks.com/topic/167928-solved-functionloop/#findComment-886509 Share on other sites More sharing options...
twilitegxa Posted July 30, 2009 Author Share Posted 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); } Link to comment https://forums.phpfreaks.com/topic/167928-solved-functionloop/#findComment-886535 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.