473,712 Members | 2,725 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Hide/Show Rows based on text box input

I have a table with 10 rows, I want all rows except for the first to be
hidden when the page first opens up. If the user puts a value in a
text box in the first row then I want the second row to display. If
they put a value in the text box in the second row then display the
third row etc. etc. etc. to 10 rows. I'm pretty new to javascript, so
I'm not to sure where to start. Any help would be great, thanks a lot.

Apr 17 '06 #1
11 8073

<ji***********@ gmail.com> wrote in message
news:11******** **************@ i39g2000cwa.goo glegroups.com.. .
I have a table with 10 rows, I want all rows except for the first to be
hidden when the page first opens up. If the user puts a value in a
text box in the first row then I want the second row to display. If
they put a value in the text box in the second row then display the
third row etc. etc. etc. to 10 rows. I'm pretty new to javascript, so
I'm not to sure where to start. Any help would be great, thanks a lot.

Try this approach.
Give the first <tr> tag an ID of say, "row1".
Give tthe second <tr> tag -> like this: <tr id="row2"
style="visibili ty:hidden;"> ...your stuff ... </tr>
Give the third tr tag an id of "row3".
(etc)
set the visibility of all rows you want hidden in the tag.

Then for the text box inside the FIRST row:
<input type='text' name='firstname ' id='firstname'
onchange='makeI tShow("row2",th is)' />

which would call this function: (not tested )
//*************** *************** *****
function makeItShow(some Row, theTextBox){
if (theTextBox.val ue != ""){
var nextRow = document.getEle mentById(someRo w);
nextRow.style.v isiblility = "visible";
}else {
nextRow.style.v isibility="hidd en";
}
}
//*************** *************** ********
Each text box would send the id of the next row to the function.
Try variations of this, and you should have a starting point.
HTH
Hal
Apr 18 '06 #2
Hal Rosser said on 18/04/2006 11:19 AM AEST:
<ji***********@ gmail.com> wrote in message
news:11******** **************@ i39g2000cwa.goo glegroups.com.. .
I have a table with 10 rows, I want all rows except for the first to be
hidden when the page first opens up. If the user puts a value in a
text box in the first row then I want the second row to display. If
they put a value in the text box in the second row then display the
third row etc. etc. etc. to 10 rows. I'm pretty new to javascript, so
I'm not to sure where to start. Any help would be great, thanks a lot.


Try this approach.
Give the first <tr> tag an ID of say, "row1".
Give tthe second <tr> tag -> like this: <tr id="row2"


I'd not bother with IDs, just use the row index. Get the row index of
the current row, and set the next one visible (if there is one).
e.g.

<title>Show Rows</title>

<style type="text/css">
#fred {visibility: hidden;}
</style>

<table>
<tbody>
<tr>
<td><input onkeypress="sho wNext(this);">
<tbody id="fred">
<tr>
<td><input onkeypress="sho wNext(this);">
<tr>
<td><input onkeypress="sho wNext(this);">
</table>

<script type="text/javascript">
function showNext(el) {
function getTR(el) {
while (el.parentNode && 'tr' != el.nodeName.toL owerCase()){
el = el.parentNode;
}
return ('tr' == el.nodeName.toL owerCase())? el : null;
}
var row = getTR(el);
if (row){
var t = row.parentNode. parentNode;
var nRow = t.rows[row.rowIndex + 1];
if (nRow && nRow.style){
nRow.style.visi bility = 'visible';
}
}
}
</script>

Of course the style should be set with script so that the rows are
visible by default.

Another strategy is to also add the onkeypress functions onload, then
each could explicitly set the following row to visible.

Seems to me the logic here could get quite convoluted trying to work out
which rows to show and hide - should a row be hidden if it has no
content? Should subsequent rows be hidden too? How does a user know
how many rows are hidden?

The usual trick is to put a button (or similar element) on the row to
show/hide the next one so the user is in control. It greatly reduces
the complexity of scripting logic.
--
Rob
Group FAQ: <URL:http://www.jibbering.c om/FAQ>
Apr 18 '06 #3
Hal Rosser wrote:
<ji***********@ gmail.com> wrote in message
news:11******** **************@ i39g2000cwa.goo glegroups.com.. .
I have a table with 10 rows, I want all rows except for the first to be
hidden when the page first opens up. If the user puts a value in a
text box in the first row then I want the second row to display. If
they put a value in the text box in the second row then display the
third row etc. etc. etc. to 10 rows. I'm pretty new to javascript, so
I'm not to sure where to start. Any help would be great, thanks a lot.


Try this approach.
Give the first <tr> tag an ID of say, "row1".
Give tthe second <tr> tag -> like this: <tr id="row2"
style="visibili ty:hidden;"> ...your stuff ... </tr>


Be aware that visibility:hidd en will still display the SPACE for the
row, just not the contents. That's fine if that's what the OP wants to
achieve.
Apr 18 '06 #4

"Tony" <to****@dslextr eme.WHATISTHIS. com> wrote in message
news:12******** *****@corp.supe rnews.com...
Hal Rosser wrote:
<ji***********@ gmail.com> wrote in message
news:11******** **************@ i39g2000cwa.goo glegroups.com.. .
I have a table with 10 rows, I want all rows except for the first to be
hidden when the page first opens up. If the user puts a value in a
text box in the first row then I want the second row to display. If
they put a value in the text box in the second row then display the
third row etc. etc. etc. to 10 rows. I'm pretty new to javascript, so
I'm not to sure where to start. Any help would be great, thanks a lot.


Try this approach.
Give the first <tr> tag an ID of say, "row1".
Give tthe second <tr> tag -> like this: <tr id="row2"
style="visibili ty:hidden;"> ...your stuff ... </tr>


Be aware that visibility:hidd en will still display the SPACE for the
row, just not the contents. That's fine if that's what the OP wants to
achieve.


I agree - so another solution may be to use display = none or inline.
Someone emailed me with that suggestion, and it sounds good too.
Apr 18 '06 #5
Hal Rosser wrote:
"Tony" <to****@dslextr eme.WHATISTHIS. com> wrote in message
news:12******** *****@corp.supe rnews.com...
Be aware that visibility:hidd en will still display the SPACE for the
row, just not the contents. That's fine if that's what the OP wants to
achieve.


I agree - so another solution may be to use display = none or inline.
Someone emailed me with that suggestion, and it sounds good too.


Be sure to test that - I've found some glitches when changing the
display value at times - such as one case in Firefox when it didn't
collapase the row when I changed it to display:none

This particular glitch may have been context-related - I'm just sharing
so that you can watch out for it.
Apr 18 '06 #6
JRS: In article <B5************ *****@bignews7. bellsouth.net>, dated
Mon, 17 Apr 2006 21:19:33 remote, seen in news:comp.lang. javascript, Hal
Rosser <hm******@bells outh.net> posted :
function makeItShow(some Row, theTextBox){
if (theTextBox.val ue != ""){
var nextRow = document.getEle mentById(someRo w);
nextRow.style.v isiblility = "visible";
}else {
nextRow.style.v isibility="hidd en";
}
}


It's generally a bad idea to duplicate code, even quite small parts,
unnecessarily - it introduces more room for error - for example, only
one attempt at spelling "visibility " is needed.

This

function makeItShow(some Row, theTextBox){ // set NextRow vis'y
document.getEle mentById(someRo w).style.visibi lity =
theTextBox.valu e != "" ? "visible" : "hidden" }

expresses what I think you meant to express, clarifies that the
visibility of one thing is set independently of its previous state, and
leaves no room for not setting NextRow in the "hide" case.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 IE 4 ©
<URL:http://www.jibbering.c om/faq/> JL/RC: FAQ of news:comp.lang. javascript
<URL:http://www.merlyn.demo n.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demo n.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Apr 19 '06 #7

"Dr John Stockton" <jr*@merlyn.dem on.co.uk> wrote in message
news:z7******** ******@merlyn.d emon.co.uk...
JRS: In article <B5************ *****@bignews7. bellsouth.net>, dated
Mon, 17 Apr 2006 21:19:33 remote, seen in news:comp.lang. javascript, Hal
Rosser <hm******@bells outh.net> posted :
function makeItShow(some Row, theTextBox){
if (theTextBox.val ue != ""){
var nextRow = document.getEle mentById(someRo w);
nextRow.style.v isiblility = "visible";
}else {
nextRow.style.v isibility="hidd en";
}
}


It's generally a bad idea to duplicate code, even quite small parts,
unnecessarily - it introduces more room for error - for example, only
one attempt at spelling "visibility " is needed.

This

function makeItShow(some Row, theTextBox){ // set NextRow vis'y
document.getEle mentById(someRo w).style.visibi lity =
theTextBox.valu e != "" ? "visible" : "hidden" }

expresses what I think you meant to express, clarifies that the
visibility of one thing is set independently of its previous state, and
leaves no room for not setting NextRow in the "hide" case.


I started to "play a John" with a 1-liner (or so) - but the intention was to
make it clear and understandable to the OP, - or someone reading the posting
as a pseudo-tutorial - and now, with your condensed version - and the
advantages thereof - they can start off understanding - then work on
improving their code from the bottom -drudging-inefficient code like mine to
the clearly more compact and efficient and easier-to-maintain code like
yours. :-)
Oh - is it true that too much documentation is bad because of the
additional server load ?
Apr 21 '06 #8
On 2006-04-19 00:27:30 +0200, Tony <to****@dslextr eme.WHATISTHIS. com> said:
Hal Rosser wrote:
"Tony" <to****@dslextr eme.WHATISTHIS. com> wrote in message
news:12******** *****@corp.supe rnews.com...
Be aware that visibility:hidd en will still display the SPACE for the
row, just not the contents. That's fine if that's what the OP wants to
achieve.
I agree - so another solution may be to use display = none or inline.
Someone emailed me with that suggestion, and it sounds good too.


yep - just don't forget the normal display for a tr is neither block
nor inline, it's table-row.

you could also write your rows like this, with no ids for each tr nor
inline event handlers (which are ugly anyway) :

<tbody id="whatever">
<tr>
<td>...<input type="text"></td>
</tr>
<tr>
<td>...<input type="text"></td>
</tr>
...etc...
</tbody>

that way, a client with JavaScript disabled (I shiver to think that
some people forsake the wonderful language that is JavaScript !) will
display all the 10 rows (so you can proudly say your page is
accessible).
Besides, and more importantly (from the coder's point of view) the HTML
code is simpler.

then in a script :

// define the function to assign as an event handler
function showNext(event)
{
this.parentNode .parentNode.nex tSibling.style. display
= this.value ? "table-row" : "none"
return true
}

myBody = document.getEle mentById("whate ver")

// the loop starts at i=1
for(i=1; myBody.rows[i]; i++)
{
// initially hide all rows but the first
myBody.rows[i].style.display= 'none'

// set the event handler for all rows's inputs but the last
myBody.rows[i-1].getElementsByT agName("input")[0].onkeypress = showNext
// assuming there is only one input in the rows
// otherwise it's easy to adapt the code
}

you can even use this loop to implement nextSibling if it's not
supported by the browser. Just add this :

if(! myBody.rows[i-1].nextSibling)
myBody.rows[i-1].nextSibling=my Body.rows[i]

Be sure to test that - I've found some glitches when changing the
display value at times - such as one case in Firefox when it didn't
collapase the row when I changed it to display:none

This particular glitch may have been context-related - I'm just sharing
so that you can watch out for it.


I also have problems with Firefox and display:none on table rows. In
the application I'm developing, I dynamically hide rows from a table
and then make them reappear, setting their style.display to 'none' or
'table-row'. Firefox behaves correctly when hiding rows, but does not
redraw them when their style.display returns to normal. The user has to
scroll the table (the tbody in my app has overflow:scroll ) to make
Firefox redraw missing rows.

Completely removing the rows from the table (with removeChild) and
appending them back works fine, but it's a lot more hassle. I haven't
had time to test it yet, but I suspect you could use style to
hide/display rows, and then force Firefox to redraw the tbody by
quickly adding then removing a row (preferably as the first row of the
table so it pushes all the other rows down - a browser just can't do
that and *not* redraw).
--
David Junger

Apr 21 '06 #9
Touffy said on 21/04/2006 2:10 PM AEST:
On 2006-04-19 00:27:30 +0200, Tony <to****@dslextr eme.WHATISTHIS. com> said:
Hal Rosser wrote:
"Tony" <to****@dslextr eme.WHATISTHIS. com> wrote in message
news:12******** *****@corp.supe rnews.com...

Be aware that visibility:hidd en will still display the SPACE for the
row, just not the contents. That's fine if that's what the OP wants to
achieve.
I agree - so another solution may be to use display = none or inline.
Someone emailed me with that suggestion, and it sounds good too.


yep - just don't forget the normal display for a tr is neither block nor
inline, it's table-row.

you could also write your rows like this, with no ids for each tr nor
inline event handlers (which are ugly anyway) :

<tbody id="whatever">
<tr>
<td>...<input type="text"></td>
</tr>
<tr>
<td>...<input type="text"></td>
</tr>
...etc...
</tbody>

that way, a client with JavaScript disabled (I shiver to think that some
people forsake the wonderful language that is JavaScript !) will display
all the 10 rows (so you can proudly say your page is accessible).
Besides, and more importantly (from the coder's point of view) the HTML
code is simpler.

then in a script :

// define the function to assign as an event handler
function showNext(event)
{
this.parentNode .parentNode.nex tSibling.style. display


That presumes that you know exactly how many nodes are in the relevant
part of the tree. Note that IE and other browsers differ on #text nodes
inserted between table rows (depending on the markup) so the use such
relationships will likely break in one browser or the other.

It is much better to put the onclick on the row, get the rowIndex
property, then show or hide the appropriate row based on its rowIndex
property.

It also avoids the differences between IE and W3C event models.

= this.value ? "table-row" : "none"
That will screw-up on browsers that don't understand table-row
(including the one used by the majority of web users). Use:

... = (row.style.disp lay == 'none')? '': 'none';

return true
}

myBody = document.getEle mentById("whate ver")

// the loop starts at i=1
for(i=1; myBody.rows[i]; i++)
{
// initially hide all rows but the first
myBody.rows[i].style.display= 'none'

// set the event handler for all rows's inputs but the last
myBody.rows[i-1].getElementsByT agName("input")[0].onkeypress = showNext
So when i is 1, you will set the handler on the 0th row, which you
didn't want to do. If you want to avoid the last, use:

for(var i=1, n=myBody.rows.l ength-1; i<n; i++)
Incidentally, for the rows collection you should be using a table
object, there is no separate interface for the tbody object, though
there is a tbodies collection.

// assuming there is only one input in the rows
// otherwise it's easy to adapt the code
}

you can even use this loop to implement nextSibling if it's not
supported by the browser. Just add this :

if(! myBody.rows[i-1].nextSibling)
That may refer to a #text node or the same row as myBody.rows[i].
myBody.rows[i-1].nextSibling=my Body.rows[i]
A 'next sibling' could be better as:

var nextRow = myBody.rows[i+1];
if (nextRow){
// there was a next row
}

or if 'currentRow' refers to some row of the table:

var nextRow = table.rows[currentRow.rowI ndex + 1];
if (nextRow){
...


Be sure to test that - I've found some glitches when changing the
display value at times - such as one case in Firefox when it didn't
collapase the row when I changed it to display:none

This particular glitch may have been context-related - I'm just
sharing so that you can watch out for it.

I also have problems with Firefox and display:none on table rows. In the
application I'm developing, I dynamically hide rows from a table and
then make them reappear, setting their style.display to 'none' or
'table-row'. Firefox behaves correctly when hiding rows, but does not
redraw them when their style.display returns to normal. The user has to
scroll the table (the tbody in my app has overflow:scroll ) to make
Firefox redraw missing rows.

Completely removing the rows from the table (with removeChild) and
appending them back works fine, but it's a lot more hassle. I haven't
had time to test it yet, but I suspect you could use style to
hide/display rows, and then force Firefox to redraw the tbody by quickly
adding then removing a row (preferably as the first row of the table so
it pushes all the other rows down - a browser just can't do that and
*not* redraw).


--
Rob
Group FAQ: <URL:http://www.jibbering.c om/FAQ>
Apr 21 '06 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
148635
by: Steve Speirs | last post by:
Hi I'm trying to show/hide a simple piece of text and a text field on a form based on what choice is made from a drop down box. <select name="dropdown" size="1"> <option selected value="">Please make a selection</option> <option value="1">Choice 1</option> <option value="2">Choice 2</option> <option value="3">Choice 3</option>
3
7772
by: KathyB | last post by:
Hi, totally new to the div show/hide thing. I have some rows in a table. When I first load the page, I only want to see divs where the divID=ForView. When I load now, I see BOTH rows...even though I have one set to style="display='none'". When I click on the Edit button on a row, I want to hide that row and in its PHYSICAL place show the ForEdit div for that item...leaving all other divs as is. I've seen some examples, everyone seems...
9
2768
by: sergio | last post by:
Hi all, I have created the following script that will show/hide a menu based on checkboxes. It works fine in Opera but not on IE6! Does anybody knows a workaround this problem? Thanks for your response. Sergio ------------------------------------------------ <script language="JavaScript" type="text/javascript">
19
6925
by: dmiller23462 | last post by:
Hi guys....I have absolutely NO IDEA what I'm doing with Javascript but my end result is I need two text boxes to stay hidden until a particular option is selected....I've cobbled together the JavaScript in this code from a couple different sites but I'm not 100% sure what each line is doing...This is the ASP code that I'm using for the page....Take a look at the JavaScript code and please let me know what each line is doing....I have been...
4
21013
by: devine | last post by:
Hi All, I am VERY new to Javascript. I have been provided with some code, which will enable me to hide/show a text area and change a submit button dependant on a check box. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
5
8435
by: ali | last post by:
Hello every one i need you help regarding div hide and show. i am having a link like <a href="#" onClick="expandWin()">show/hide </a> <div id=showHide> </div> within div i have lots of form tags and div elements say n. The problem
5
2139
by: Dautkhanov | last post by:
Hello all ! I have my own library for web-design building - active forms, lists. I am going to build tabbing component. The complexity in this process is that all web forms uniformed and are built as TABLEs, where each field is TR. Tabs have to show/hide some of table rows. I don't know how TR's properties must be changed in order to hide them all.
1
4171
by: pamate | last post by:
hi, I want to show hide layers. I am able to show and hide layers but i am facing problem that, cant view the cursor in Mozilla,but i can type in input text box, its overlapping the layers. I don`t want to change the way i have used to show and hide layers. check down code :- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...
1
2368
by: prathna | last post by:
Hi .. I have a logic:iterate tag which will display 5 rows each row with a drop downlist and 2 textfields.now by default all the rows will be shown.how do i hide all the rows except the first one.i know how to show/hide a row when its not dynamic.but i dont know how to do it when its logic iterate tag. <logic:iterate indexId="index" id="phoneItem" name="nameForm" property="results"> <% String dropdownType = "results.dropdownType";...
0
8794
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9295
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9165
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9066
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9005
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7935
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6617
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
2
2509
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2099
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.