Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

show/hide a table row based upon a selected value?

Status
Not open for further replies.
longmatch

longmatch

Programmer
Nov 1, 2001
406
I found a piece of code on the web, which can be used in my program. Initially I want to hide one row in the table. Once the user select 'other', the hidden row should show up, which include a textbox for user input. How can I make it work. This piece of code just works fine through checkbox. I would like to use dropdown list activate it.

Thanks

Haijun

<html>
<head>
<title>Hide Row</title>
<script language=&quot;JavaScript&quot;>

function toggle(target)
{
obj=document.getElementById(target);
obj.style.display=( (obj.style.display=='none') ? '' : 'none');
}
</script>
</head>
<body>
<input style=&quot;display:inline&quot; type=&quot;checkbox&quot; onClick=&quot;toggle('therow')&quot; id=checkbox1 name=checkbox1>
<table>
<tr id=&quot;therow&quot; style=&quot;display:inline&quot;>
<td width=&quot;60&quot;><font size=&quot;1&quot; face=&quot;Arial&quot;>6/25/2002</font>&nbsp;&nbsp;</td>
<td width=&quot;60&quot; align=&quot;right&quot;><font size=&quot;1&quot; face=&quot;Arial&quot;>
<span style='background-color: #C0C0C0'>
<i><u>1.00</u></i>
</span>
</font>&nbsp;&nbsp;</td>
<td width=&quot;60&quot; align=&quot;right&quot;><font size=&quot;1&quot; face=&quot;Arial&quot;>2</font>&nbsp;&nbsp;</td>
<td width=&quot;60&quot; align=&quot;right&quot;><font size=&quot;1&quot; face=&quot;Arial&quot;>3.00</font>&nbsp;&nbsp;</td>
<td width=&quot;60&quot; align=&quot;right&quot;><font size=&quot;1&quot; face=&quot;Arial&quot;>3.00</font>&nbsp;&nbsp;</td>
<td width=&quot;60&quot; align=&quot;right&quot;><font size=&quot;1&quot; face=&quot;Arial&quot;>3.00</font>&nbsp;&nbsp;</td>
<td width=&quot;60&quot; align=&quot;right&quot;><font size=&quot;1&quot; face=&quot;Arial&quot;>3.00</font>&nbsp;&nbsp;</td>
</tr>
</table>
</body>
</html>
 
Sort by date Sort by votes
just a few simple mods required...

<html>
<head>
<title>Hide Row</title>
<script language=&quot;JavaScript&quot;>

function toggle(target)
{
if (target!=&quot;&quot;) {
obj=document.getElementById(target);
obj.style.display=( (obj.style.display=='none') ? '' : 'none');
}
}
</script>
</head>
<body>
<select name=&quot;sel1&quot; onchange=&quot;toggle(this.value)&quot;>
<option value=&quot;&quot;>
<option value=&quot;therow1&quot;>input 1
<option value=&quot;therow2&quot;>input 2
</select>

<table>
<tr id=&quot;therow1&quot; style=&quot;display:none&quot;>
<td width=&quot;60&quot;><font size=&quot;1&quot; face=&quot;Arial&quot;>Input 1:</font> </td>
<td width=&quot;60&quot; align=&quot;right&quot;><input type=text name=&quot;Inp1&quot;></td>

</tr>
<tr id=&quot;therow2&quot; style=&quot;display:none&quot;>
<td width=&quot;60&quot;><font size=&quot;1&quot; face=&quot;Arial&quot;>Input 2:</font> </td>
<td width=&quot;60&quot; align=&quot;right&quot;><input type=text name=&quot;Inp2&quot;></td>

</tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
Thank you for your help. The code just works fine.
Could you give me more explanation about this syntax? I can not understand it.

obj.style.display=( (obj.style.display=='none') ? '' : 'none');


thanks

Longmatch
 
Upvote 0 Downvote
One more question.
How to hide the row again if we make other choice. This program can not hide the row once it shows.

Longmatch
 
Upvote 0 Downvote
Yeah, its called an immediate if

Result = ExpressionToEvaluate ? TrueValue : FalseValue

so if ExpressionToEvaluate = true then
Result = TrueValue
if ExpressionToEvaluate = false then
Result = FalseValue

if table row display property is set to 'none' then assign '' to rows display property, this makes the table row appear

else if 'none' is not the display properties value then assign 'none' to rows display property, this hides the row


where 'obj' is the table row


 
Upvote 0 Downvote
to hide the other rows requires another slight mod to the function itself and the api...


<html>
<head>
<title>Hide Row</title>
<script language=&quot;JavaScript&quot;>

function toggle(rowtoshow,totalrows)
{
//first hide all rows
for (i=1;i<totalrows+1;i++)
{
eval(&quot;document.getElementById(\&quot;therow&quot;+i+&quot;\&quot;).style.display='none'&quot;);
}
//now see which row to show
if (rowtoshow!=&quot;&quot;) {
obj=document.getElementById(&quot;therow&quot;+rowtoshow);
obj.style.display='';
}
}
</script>
</head>
<body>
<select name=&quot;sel1&quot; onchange=&quot;toggle(this.value,2)&quot;>
<option value=&quot;&quot;>
<option value=&quot;1&quot;>input 1
<option value=&quot;2&quot;>input 2
</select>

<table>
<tr id=&quot;therow1&quot; style=&quot;display:none&quot;>
<td width=&quot;60&quot;><font size=&quot;1&quot; face=&quot;Arial&quot;>Input 1:</font> </td>
<td width=&quot;60&quot; align=&quot;right&quot;><input type=text name=&quot;Inp1&quot;></td>

</tr>
<tr id=&quot;therow2&quot; style=&quot;display:none&quot;>
<td width=&quot;60&quot;><font size=&quot;1&quot; face=&quot;Arial&quot;>Input 2:</font> </td>
<td width=&quot;60&quot; align=&quot;right&quot;><input type=text name=&quot;Inp2&quot;></td>

</tr>
</table>
</body>
</html>


 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
829
malpa
malpa
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
812
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
933
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top