Hide/Show Rows based on text box input

[jimstruckster]

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.

 

[Hal Rosser]

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

 

[RobG]

Hal Rosser said on 18/04/2006 11:19 AM AEST:

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.

 

[Hal Rosser]

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.

 

[Dr John Stockton]

JRS: In article <[email protected]>, dated
Mon, 17 Apr 2006 21:19:33 remote, seen in Hal

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.

 

[Hal Rosser]

JRS: In article <[email protected]>, dated
Mon, 17 Apr 2006 21:19:33 remote, seen in Hal


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 ?