Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Hide/Show Rows based on text box input

Reply
Thread Tools

Hide/Show Rows based on text box input

 
 
jimstruckster@gmail.com
Guest
Posts: n/a
 
      04-17-2006
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.

 
Reply With Quote
 
 
 
 
Hal Rosser
Guest
Posts: n/a
 
      04-18-2006

<(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.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="visibility: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='makeItShow("row2",this)' />

which would call this function: (not tested )
//***********************************
function makeItShow(someRow, theTextBox){
if (theTextBox.value != ""){
var nextRow = document.getElementById(someRow);
nextRow.style.visiblility = "visible";
}else {
nextRow.style.visibility="hidden";
}
}
//**************************************
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


 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      04-18-2006
Hal Rosser said on 18/04/2006 11:19 AM AEST:
> <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed) oups.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="showNext(this);">
<tbody id="fred">
<tr>
<td><input onkeypress="showNext(this);">
<tr>
<td><input onkeypress="showNext(this);">
</table>

<script type="text/javascript">
function showNext(el) {
function getTR(el) {
while (el.parentNode && 'tr' != el.nodeName.toLowerCase()){
el = el.parentNode;
}
return ('tr' == el.nodeName.toLowerCase())? 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.visibility = '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.com/FAQ>
 
Reply With Quote
 
Hal Rosser
Guest
Posts: n/a
 
      04-18-2006

"Tony" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> Hal Rosser wrote:
> > <(E-Mail Removed)> wrote in message
> > news:(E-Mail Removed) oups.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="visibility:hidden;"> ...your stuff ... </tr>

>
> Be aware that visibility:hidden 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.


 
Reply With Quote
 
Dr John Stockton
Guest
Posts: n/a
 
      04-19-2006
JRS: In article <B5X0g.5384$(E-Mail Removed)>, dated
Mon, 17 Apr 2006 21:19:33 remote, seen in news:comp.lang.javascript, Hal
Rosser <(E-Mail Removed)> posted :

>function makeItShow(someRow, theTextBox){
> if (theTextBox.value != ""){
> var nextRow = document.getElementById(someRow);
> nextRow.style.visiblility = "visible";
> }else {
> nextRow.style.visibility="hidden";
> }
>}


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(someRow, theTextBox){ // set NextRow vis'y
document.getElementById(someRow).style.visibility =
theTextBox.value != "" ? "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.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
 
Reply With Quote
 
Hal Rosser
Guest
Posts: n/a
 
      04-20-2006

"Dr John Stockton" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> JRS: In article <B5X0g.5384$(E-Mail Removed)>, dated
> Mon, 17 Apr 2006 21:19:33 remote, seen in news:comp.lang.javascript, Hal
> Rosser <(E-Mail Removed)> posted :
>
> >function makeItShow(someRow, theTextBox){
> > if (theTextBox.value != ""){
> > var nextRow = document.getElementById(someRow);
> > nextRow.style.visiblility = "visible";
> > }else {
> > nextRow.style.visibility="hidden";
> > }
> >}

>
> 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(someRow, theTextBox){ // set NextRow vis'y
> document.getElementById(someRow).style.visibility =
> theTextBox.value != "" ? "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 ?


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
div box questions; float text around a box, fit box to image size Gnarlodious HTML 4 05-05-2010 11:30 AM
Deselecting text in input text box len.hartley@gmail.com Javascript 5 03-07-2006 11:10 PM
Width of text input box vs. password input box cjl HTML 1 10-31-2005 11:46 AM
Off Topic: Width of text input box vs. password input box cjl Javascript 7 10-30-2005 10:11 PM
hide the input box or change the color of input box in html ashutosh Java 3 06-16-2005 02:21 PM



Advertisments