Jump to content

Show/Hide Multiple Rows


hazard360
 Share

Recommended Posts

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

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

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

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

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

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

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

  • 2 weeks later...

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...