Show/Hide where tagname.value!==’string’

@tjmcdOct 13.2006

I have 50 hidden rows in a table <tr style=”display: none;” id=”grounds2″>
My goal, is to show all Rows where contained textarea.value !==’Note:’
via small js script which I am certain is possible, but has me completely stumpted.

[CODE]<script type=”text/javascript”> function showHide(inID) { if (document.getElementById(inID).style.display == ‘none’) { document.getElementById(inID).style.display = ‘block’; } else { document.getElementById(inID).style.display = ‘none’; } } </script>

<table width=”600″> <tr id=”grounds1″> <td><textarea class=”noscroll” name=”GN_1″ cols=”100″ rows=”5″ tabindex=”1″>Note:</textarea></td> <td align=”center” width=”80″ > <input type=”checkbox” class=”checkbox” value=”1″ name=”C1″ onclick=”if((document.Q_note.GN_1.value !==’Note:’)&&(document.Q_note.C1.checked)) {showHide(‘grounds2′); document.Q_note.GN_2.select();}”> </td> </tr> <tr style=”display: none;” id=”grounds2″> <td><textarea class=”noscroll” name=”GN_2″ cols=”100″ rows=”5″ tabindex=”2″>Note:</textarea></td> <td align=”center” width=”80″ ><input type=”checkbox” class=”checkbox” value=”1″ name=”C2″ onclick=”if((document.Q_note.GN_2.value !==’Note:’)&&(document.Q_note.C2.checked)) {showHide(‘grounds3′);} document.Q_note.GN_3.select();” ></td> </tr> <tr style=”display: none;” id=”grounds3″> <td><textarea class=”noscroll” name=”GN_3″ cols=”100″ rows=”5″ tabindex=”3″>Note:</textarea></td> <td align=”center” width=”80″ ><input type=”checkbox” class=”checkbox” value=”1″ name=”C3″ onclick=”if((document.Q_note.GN_3.value !==’Note:’)&&(document.Q_note.C3.checked)) {showHide(‘grounds4′);} document.Q_note.GN_4.select();”></td> </tr> <tr style=”display: none;” id=”grounds4″> <td><textarea class=”noscroll” name=”GN_4″ cols=”100″ rows=”5″ tabindex=”4″>Note:</textarea></td> <td align=”center” width=”80″ ><input type=”checkbox” class=”checkbox” value=”1″ name=”C4″ onclick=”if((document.Q_note.GN_4.value !==’Note:’)&&(document.Q_note.C4.checked)) {showHide(‘grounds5′);} document.Q_note.GN_5.select();” ></td> </tr> <tr style=”display: none;” id=”grounds5″> <td><textarea class=”noscroll” name=”GN_5″ cols=”100″ rows=”5″ tabindex=”5″>Note:</textarea></td> <td align=”center” width=”80″ ><input type=”checkbox” class=”checkbox” value=”1″ name=”C5″ onclick=”if((document.Q_note.GN_5.value !==’Note:’)&&(document.Q_note.C5.checked)) {showHide(‘grounds6’);} document.Q_note.GN_6.select();” ></td> </tr> <tr style=”display: none;” id=”grounds6″> <td><textarea class=”noscroll” name=”GN_6″ cols=”100″ rows=”5″ tabindex=”6″>Note:</textarea></td> <td align=”center” width=”80″ > </td> </tr>[/CODE]

to post a comment

JavaScript

10 Comments(s) _↴

@KravvitzOct 13.2006 — #Perhaps this will help some: [url=http://www.dynamicsitesolutions.com/javascript/hiding_and_unhiding_table_rows/]Hiding and Unhiding Table Rows[/url]

@JMRKEROct 13.2006 — #Try writing a function that loops through your choices.

I have not had time to try this, but you should be able to:

[code=php]
 function ShowGroundsNote() {
 for (var i=0; i<50; i++) {
 var idname = 'grounds'+(i+1);
 document.getElementById(idname).style.display='block';
 }
 }
 [/code]

You should also be able to combine

if((document.Q_note.GN_1.value !=='Note:')&&(document.Q_note.C1.checked))
[/quote]logic to determine the 'Note' status within the function as well.

Sorry, I have not had the time to code further.

@KravvitzOct 13.2006 — #JMRKER, table rows are not display:block; by default and setting them to that causes problems. (IE gets it wrong.) Check out the link I posted.

@tjmcdauthorOct 13.2006 — #Thanks Guys,

I've got the Showing/hiding rows part. The thing that I'm having trouble understanding is establishing the relationship between all <textarea> and the <tr>'s containing them in such a way as to allow a sweeping statement that says "show all rows containing <textarea> where value!=='Note'

Thanks

@JMRKEROct 13.2006 — #Like I said:I have not had time to try this, ...[/QUOTE] but your comments are noteworthy for others viewing this forum.

Thanks for the 'heads-up'. I'll try to read your link later.

@KravvitzOct 13.2006 — #Try this:

function showHideTARows() {
 var tbl,rows;
 if(document.getElementById &amp;&amp; document.getElementsByTagName) {
 tbl = document.getElementById('table1');
 if(!tbl) return;
 rows = tbl.getElementsByTagName('tr');
 } else if(document.all &amp;&amp; document.all.tags) { // IE4 support 
 tbl = document.all.table1;
 if(!tbl) return;
 rows = tbl.all.tags('tr');
 }
 for(var i=0;i&lt;rows.length;i++) {
 if(document.Q_note.elements['GN_'+(i+1)].value === 'Note:') {
 rows[i].style.display = 'none';
 } else {
 // conditional compilation to hide the try-catch blocks from IE4
 /*@cc_on @if(!@_jscript || (@_jscript_version &gt;= 5)) @*/
 try {
 rows[i].style.display = 'table-row';
 } catch(e) {
 rows[i].style.display = 'block';
 }
 /*@elif(@_jscript_version &lt; 5)
 rows[i].style.display = 'block'; // for IE4
 @end @*/
 }
 }
 }

Edit: I think it's fixed now.

@tjmcdauthorOct 14.2006 — #Thanks Kravvits,

Sorry to be so long responding here. Got pulled away on another project.

Tried your suggestion as posted, but no luck. Played with it a bit, trying to wrap my small brain arround it, and in the end could only conclude 2 things:

1. I don't really understand it.

2. I consistantly get "Error: 'idx' is undefined"

@KravvitzOct 14.2006 — #1) It is complicated. What don't you understand?

2) I should have tested it against the code you provided. I forgot to remove the 2nd half of two of the conditionals that were in the original function. Try it again.

@tjmcdauthorOct 17.2006 — #Thanks Again Kravits,

Acutally quite surprised at how tricky this proved to be, but finally -- with your fine assistance -- it works. Hooray! ?

[code=php]<style>
 <!-- 
 .headerRow{display: block;} .show{visibility:visible;} .hide{display:none;}
 -->
 </style>
 <script language="JavaScript">
 function change(id, newClass) {
 identity=document.getElementById(id);
 identity.className=newClass;
 }
 function showNotes() {
 var tbl,rows;
 if(document.getElementById && document.getElementsByTagName) {
 tbl = document.getElementById('table1');
 rows = tbl.getElementsByTagName('tr');
 } 
 for(var i=0;i<rows.length;i++) {
 if((document.Q_note.elements['qnote_'+(i+1)].value == '') && !(rows[i].className =='headerRow')) {
 rows[i].className = 'hide';
 } else {   rows[i].className = 'show';
 }
 }
 }
 function myAlert(){
 alert('No notes. Hiding This Row.');
 }
 </script> 
 <body onload="showNotes()">
 <form name="Q_note">
 <p>	<a href="javascript:showNotes()">&lt;Show All&nbsp; Notes Entered&gt;</a></p>
 <table id="table1" border="1" width="100%">
 <tr class="headerRow">
 <td width="98">GROUNDS</td>
 <td width="17">1</td>
 <td width="601"><textarea name="qnote_1"  cols="100" rows="5" tabindex="1"></textarea></td>
 <td align="center"><input type="button"  value="+" name="B1" onclick="if(document.Q_note.qnote_1.value !=='')
 {change('grounds2', 'show'); document.Q_note.qnote_2.select();} else {document.Q_note.qnote_1.select(); return;}"></td>
 </tr>
 <tr id="grounds2"><td width="98">&nbsp;</td>
 <td width="17">2</td>
 <td width="601"><textarea name="qnote_2" cols="100" rows="5" tabindex="2"></textarea></td>
 <td align="center">
 <input type="button"  value="+" name="B2" onclick="if(document.Q_note.qnote_2.value !=='')
 {change('grounds3', 'show' ); document.Q_note.qnote_3.select();} else {myAlert();change('grounds2','hide');}"></td>
 </tr>
 <tr id="grounds3"><td width="98">&nbsp;</td>
 <td width="17">3</td>
 <td width="601"><textarea name="qnote_3" cols="100" rows="5" tabindex="3"></textarea></td>
 <td align="center"><input type="button"  value="+" name="B3" onclick="if(document.Q_note.qnote_3.value =='')
 {change('grounds4', 'hide' ); myAlert();}"></td>
 </tr>
 <tr id="grounds4" style="display:none;"><td width="98">&nbsp;</td>
 <td width="17">&nbsp;</td>
 <td width="601"><textarea name="qnote_4" style="display:none;" cols="100" rows="5" tabindex="4"></textarea></td>
 <td align="center">
 &nbsp;</td>
 </tr>
 </table>[/code]

@KravvitzOct 17.2006 — #Ugh. IE only.

Try this.

&lt;style type="text/css"&gt;
 .headerRow, .show{
 display: block;
 }
 .hide{
 display:none;
 }
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 function change(id, newClass) {
 document.getElementById(id).className=newClass;
 }
 function showNotes() {
 if(!document.getElementById || !document.getElementsByTagName) return;
 var rows = document.getElementById('table1').getElementsByTagName('tr');
 
 for(var i=0;i&lt;rows.length;i++) {
 if((document.Q_note.elements['qnote_'+(i+1)].value == '') &amp;&amp; 
 !(/bheaderRowb/.test(rows[i].className))) {
 rows[i].className += ' hide';
 } else {
 rows[i].className.replace(/s*hideb/,'')
 }
 }
 }
 function myAlert(){
 alert('No notes. Hiding This Row.');
 }
 window.onload = showNotes;
 &lt;/script&gt;

Also in #JavaScript _↴

Need explaination for this javascript code pop up menu not working in blogger template javascript radio buttons??

Success!

Help @tjmcd spread the word by sharing this article on Twitter...

Tweet This

Show/Hide where tagname.value!==’string’

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Show/Hide where tagname.value!==’string’

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴