hazard360 Posted February 28, 2008 Share Posted February 28, 2008 HiI have been looking around this forum for a while now, and I can see lots of scripts which work for me which show/hide table rows.I need a slightly different variation of it where I have a drop down field with a value of between 1 & 10. If the value 2 is selected I need 2 text fields (i.e 2 table rows) to appear, if 8 is selected I need 8 rows, etc. It is to allow someone to select the number of participants in a meeting and then enter the email address for each participant so I can contact them.Can anyone advise on how to achieve this? I am new to Jacascript, but know alot about HTML, CSS and VBScript.CheersGraeme Link to comment Share on other sites More sharing options...
jesh Posted February 28, 2008 Share Posted February 28, 2008 I would suggest using the DOM.Use the createElement method on the document object to create the input elements and then use the appendChild method to add those input elements to some containing div.createElementhttp://www.w3schools.com/dom/dom_nodes_create.aspappendChildhttp://www.w3schools.com/dom/dom_nodes_add.aspHere's a sample: <html><body><script type="text/javascript">function setupInputs(number){ var container = document.getElementById("inputs"); var max = Number(number); container.innerHTML = ""; var input; for(var i = 0; i < number; i++) { input = document.createElement("input"); input.id = input.name = "input" + i; container.appendChild(input); container.appendChild(document.createElement("br")); }}</script><select onchange="setupInputs(this.value);"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option></select><div id="inputs"></div></body></html> Link to comment Share on other sites More sharing options...
aalbetski Posted February 28, 2008 Share Posted February 28, 2008 This is the pertinent section of a project I did that adds and removes rows dynamically (was developed for IE only. you're on your own to modify for other browsers). It may be enough to get you going <table id="MyTable"> <tr> <td><button onclick="deleteRow(this)">Delete Row</button></td> <td><input type="text" name="d1"></input></td> </tr></table><button onclick="addRow()">Add Row</button><button onclick="deleteRows()">Delete All Rows</button><script>function addRow(){ var oTable = document.getElementById("MyTable") var lRows = oTable.rows.length var oRow = oTable.rows(lRows-1) var oNewRow = oRow.cloneNode(true) oRow.parentNode.insertBefore(oNewRow,oRow.nextSibling);}function deleteRow(item){ while (item.tagName != 'TR') { item = item.parentNode } item.removeNode(true)}function deleteRows(){ var oTable = document.getElementById("MyTable") var lRows = oTable.rows.length var oRow = oTable.rows(lRows-1) while (oTable.rows.length != 1) { oTable.rows(oTable.rows.length-1).removeNode(true) }}</script> Link to comment Share on other sites More sharing options...
jhecht Posted February 28, 2008 Share Posted February 28, 2008 Not to re-invent the wheel, but you could do this with mootools pretty easily (i use it often because javascript without a framework annoys me, weird hidden attributes and things get on my nerves).once you include MooTools, make your page look like this: <html><head> <title>Your page title</title> <script type="text/javascript" src="your/MooTools/file.js"></script> <script type="text/javascript"> window.addEvent('domready',function(){ var drop = $('drop'); drop.addEvent('change',function(){ var num = drop.value; var tableChildren = $('myTable').getChildren(); //This gets all direct child nodes of myTable; tableChildren.each(function(childRow,i){ if(i < num){ childRow.setStyle('display',''); }else{ childRow.setStyle('display','none'); } }); }); }); </script></head> <body> <select id="drop"> <!-- fill in options here, im lazy --> </select> <table id="myTable"> <!-- fill in rows here --> </table> </body></html> This will just simply show/hide things. If you want to get technical with things, i could whip up a nice slide-toggle kind of thing for the rows to hide(really easy to do with mootools) and show witih a nice transition. Link to comment Share on other sites More sharing options...
clonetrooper9494 Posted February 29, 2008 Share Posted February 29, 2008 I don't see why you couldn't use for()...function rows(num)for(i=0,i<num,i++){document.getElementById('a_div').innerHTML+="<tr><td>email:<input type='text' id='email" + i + "></td></tr>"}EDIT: oh! now I see! you need a button that says DELET ROW right? well this might work...function rows(num)for(i=0,i<num,i++){document.getElementById('a_div').innerHTML+="<span id='span" + i + "'>email:<input type='text' id='email" + i + "><input type='button' value='DELET ROW' onlclick='deletrow(document.getElementById('" + i + "'))'></span>"}function deletrow(row)row.innerHTML = ''; Link to comment Share on other sites More sharing options...
jhecht Posted February 29, 2008 Share Posted February 29, 2008 that for won't work, mainly because theres no ";" in it... And yeah, that would work, but perhaps he has the rows done already in a table, and doesnt want to rely on Javascript to write them. There's a lot of reasons for things like this. Really, theres a million ways to solve a problem, just depends on which evil makes the most sense to him Link to comment Share on other sites More sharing options...
hazard360 Posted March 3, 2008 Author Share Posted March 3, 2008 Thanks for the suggestions. In reply to some of them, I do not need any buttons which say Add/Delte rows, I want the rows to appear automatically when a user selects the number. i.e. If value 2 is selected I want two rows wth a text field in each to appear. If value 3 is selected, 3 rows to appear etc.......I will try the suggestion CloneTrooper made using a FOR loop.If anyone has more suggestions then please make them as understandable as possible because as I said, I am new to javascript! Link to comment Share on other sites More sharing options...
hazard360 Posted March 11, 2008 Author Share Posted March 11, 2008 In reply to Jhecht:And yeah, that would work, but perhaps he has the rows done already in a table, and doesnt want to rely on Javascript to write them. There's a lot of reasons for things like this.I have the rows already drawn, I just want them to appear and disappear depending on what value is selected, automatically. I do not want a button which says Add/Delete row. Link to comment Share on other sites More sharing options...
ericrf Posted March 11, 2008 Share Posted March 11, 2008 use document.getElementById("id").style.display = "none"; to hideuse document.getElementById("id").style.display = "block"; to show Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.