Solved

Access span id by using the row index value

Posted on 2004-08-19
3
850 Views
Last Modified: 2012-06-27
I'm trying to figure out how to hide/show certain elements within span tags, without having to have unique id's on the tr tags.  I can determine the table row index, but I need to be able to use that row index along with say the span id 'label' to hide/show the elements within the 'label' span tags.  I could use getElementById("label"), but that will hide/show just the first span tag with id equal to label.  When I really want to be able to specific table row index and a delimeted list of span id's that I want to hide/show.  This should only affect the span id's within the row index I specify.  Anyone have any suggestions?  Thanks in advance.

===== CODE =====
<html>
<head>

<script language="javascript">
function hide() {
      for(var I = 0; I < arguments.length; I++) {
            var obj = document.getElementById(arguments[I]);
            obj.style.display = 'none';
      }
}
function show() {
      for(var I = 0; I < arguments.length; I++) {
            var obj = document.getElementById(arguments[I]);
            obj.style.display = '';
      }
}

function getRowIndex(button) {
      var el = button;
      while(el.tagName.toLowerCase() != "tr")
            el = el.parentNode;
      return el.sectionRowIndex;
}
</script>

</head>
<body>

<table width="100%" border="1" cellpadding="0" class="label" name="DynamicFieldTable" id="DynamicFieldTable">
<tbody id="dynamic_field_elements">
<tr valign="bottom">
      <td>
            <select name="dynfieldFieldType[]" id="dynfieldFieldType" style="background-color:#ffffff;" onChange="disableFormControls(this.value);">
            <option value="all"> -- Select Field Type -- </option>
            <option value="select">Drop Down Options List</option>
            <option value="text">Text Input</option>
            <option value="textarea">Textarea</option>
            <option value="radio">Radio Button</option>
            <option value="checkbox">CheckBox</option>
            <option value="line_hr">Line - Solid line</option>
            <option value="line_blank">Line - Blank line</option>
            </select>

      <span id="nooptions">
            >> No options available <<
      </span>
      <span id="required">
            &nbsp; <input type="checkbox" name="dynfieldRequired[]" id="dynfieldRequired" value=""> Required?
      </span>
      <span id="label">
            Display Label:
            <input type="text" name="dynfieldLabel[]" id="dynfieldLabel" value="" size="30" maxlength="100" style='background-color:#ffffff;'>
            <input type="hidden" name="dynfieldName" value="">
      </span>
      <span id="general">
            Tool Tip Help Message <input type="text" name="dynfieldToolTip[]" id="dynfieldToolTip" value="">
      </span>
      <span id="text">
            Width of Field:      <input type="text" name="dynfieldSize[]" id="dynfieldSize" value="" size="5"> &nbsp; &nbsp;
            Maximum Characters:      <input type="text" name="dynfieldMaxLength[]" value="" size="5">
      </span>
      <span id="optionslist">
            Options List (delimited)
            <input type="text" name="dynfieldOptionsList[]" id="dynfieldOptionsList" value="" size="5">
      </span>
      <span id="cssclass">
            CSS Class ID: <input type="text" name="dynfieldCSSClassID[]" id="dynfieldCSSClassID" value="" size="5">
      </span>
            <input type="button" onclick="alert( getRowIndex(this) );" value="Show Row Index">
      </td>
</tr>
<tr valign="bottom">
      <td>
            <select name="dynfieldFieldType[]" id="dynfieldFieldType" style="background-color:#ffffff;" onChange="disableFormControls(this.value);">
            <option value="all"> -- Select Field Type -- </option>
            <option value="select">Drop Down Options List</option>
            <option value="text">Text Input</option>
            <option value="textarea">Textarea</option>
            <option value="radio">Radio Button</option>
            <option value="checkbox">CheckBox</option>
            <option value="line_hr">Line - Solid line</option>
            <option value="line_blank">Line - Blank line</option>
            </select>

      <span id="nooptions">
            >> No options available <<
      </span>
      <span id="required">
            &nbsp; <input type="checkbox" name="dynfieldRequired[]" id="dynfieldRequired" value=""> Required?
      </span>
      <span id="label">
            Display Label:
            <input type="text" name="dynfieldLabel[]" id="dynfieldLabel" value="" size="30" maxlength="100" style='background-color:#ffffff;'>
            <input type="hidden" name="dynfieldName" value="">
      </span>
      <span id="general">
            Tool Tip Help Message <input type="text" name="dynfieldToolTip[]" id="dynfieldToolTip" value="">
      </span>
      <span id="text">
            Width of Field:      <input type="text" name="dynfieldSize[]" id="dynfieldSize" value="" size="5"> &nbsp; &nbsp;
            Maximum Characters:      <input type="text" name="dynfieldMaxLength[]" value="" size="5">
      </span>
      <span id="optionslist">
            Options List (delimited)
            <input type="text" name="dynfieldOptionsList[]" id="dynfieldOptionsList" value="" size="5">
      </span>
      <span id="cssclass">
            CSS Class ID: <input type="text" name="dynfieldCSSClassID[]" id="dynfieldCSSClassID" value="" size="5">
      </span>
            <input type="button" onclick="alert( getRowIndex(this) );" value="Show Row Index">
      </td>
</tr>
</tbody>
</table>

<input type="button" onclick="hide('general','label','optionslist','cssclass');" value="Hide"><input type="button" onclick="show('general','label','optionslist','cssclass');" value="Show">

</body>
</html>
0
Comment
Question by:expertis
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 500 total points
ID: 11850249
Hi

Well, ids are only supposed to be for one element, so I would suggest changing it to class. (My example below uses the id, so it uses something.id. If you change it to class, just use something.className instead).


function hide() {
   var secIndex = getRowIndex(arguments[0]);
   while (arguments[0].tagName.toLowerCase()!="table") {
      arguments[0] = arguments[0].parentNode;
   }
   var tdChildren = arguments[0].rows[secIndex].childNodes;
   for (k=0;k<tdChildren.length;k++) {
      for (l=0;l<tdChildren[k].childNodes.length;l++) {
         var myChild = tdChildren[k].childNodes[l];
         if (myChild.tagName==null) {
            continue;
         }
         else if (tdChildren[k].childNodes[l].tagName.toLowerCase()=="span") {
            for (m=1;m<arguments.length;m++) {
               if (tdChildren[k].childNodes[l].id==arguments[m]) {
                  tdChildren[k].childNodes[l].style.display='none';
                  break;
               }
            }
         }
      }
   }
}

The show function is follows:

function show() {
   var secIndex = getRowIndex(arguments[0]);
   while (arguments[0].tagName.toLowerCase()!="table") {
      arguments[0] = arguments[0].parentNode;
   }
   var tdChildren = arguments[0].rows[secIndex].childNodes;
   for (k=0;k<tdChildren.length;k++) {
      for (l=0;l<tdChildren[k].childNodes.length;l++) {
         var myChild = tdChildren[k].childNodes[l];
         if (myChild.tagName==null) {
            continue;
         }
         else if (tdChildren[k].childNodes[l].tagName.toLowerCase()=="span") {
            for (m=1;m<arguments.length;m++) {
               if (tdChildren[k].childNodes[l].id==arguments[m]) {
                  tdChildren[k].childNodes[l].style.display='';
                  break;
               }
            }
         }
      }
   }
}



Just plug these functions as substitutes into your code. A few warnings. This was typed up in half an hour quickly so doesn't have too many error checking. As the first argument, you must have this, for example:

hide(this,'general','label','optionslist','cssclass');" value="Hide"><input type="button" onclick="show(this,'general','label','optionslist','cssclass');

Second of all, this assumes you're using tables. Your button in your example has the buttons outside the tables. Instead, you have to move hide() and show() to the Show Row Index, as an onclick. I would also suggest adding a Hide Row Index inside the table.


Finally, after I typed all of the above, I hope I haven't misunderstood you in the sense that you just want your button shown to hide all of those spans in the whole table? If that's the case, you can simply have this:


function hide() {
   var theSpans = document.getElementsByTagName("span");
   for (i=0;i<arguments.length;i++) {
      for (j=0;j<theSpans.length;j++) {
         if (theSpans[j].id==arguments[i]) {
            theSpans[j].style.display = 'none';
         }
      }
   }
}

and similar for show() instead with display = '';

For the above function, you do not need the 'this'
         

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 11850334
Is this what you are asking for:

function hide() {
    span = document.getElementsByTagName("SPAN");
    for(var I = 0; I < arguments.length; I++) {
      sId =arguments[I];
      for(s=0;s<span.length;s++){
        if(span[s].id==sId){
          span[s].style.display = 'none';
        }
      }
    }
}
function show() {
    span = document.getElementsByTagName("SPAN");
    for(var I = 0; I < arguments.length; I++) {
      sId =arguments[I];
      for(s=0;s<span.length;s++){
        if(span[s].id==sId){
          span[s].style.display = '';
        }
      }
    }
}

0
 

Author Comment

by:expertis
ID: 11857230
Thanks for the excellent code Zyloch!  The following snippet of code is what worked for me.

function hide() {
   var secIndex = getRowIndex(arguments[0]);
   while (arguments[0].tagName.toLowerCase()!="table") {
      arguments[0] = arguments[0].parentNode;
   }
   var tdChildren = arguments[0].rows[secIndex].childNodes;
   for (k=0;k<tdChildren.length;k++) {
      for (l=0;l<tdChildren[k].childNodes.length;l++) {
         var myChild = tdChildren[k].childNodes[l];
         if (myChild.tagName==null) {
            continue;
         }
         else if (tdChildren[k].childNodes[l].tagName.toLowerCase()=="span") {
            for (m=1;m<arguments.length;m++) {
               if (tdChildren[k].childNodes[l].id==arguments[m]) {
                  tdChildren[k].childNodes[l].style.display='none';
                  break;
               }
            }
         }
      }
   }
}

function show() {
   var secIndex = getRowIndex(arguments[0]);
   while (arguments[0].tagName.toLowerCase()!="table") {
      arguments[0] = arguments[0].parentNode;
   }
   var tdChildren = arguments[0].rows[secIndex].childNodes;
   for (k=0;k<tdChildren.length;k++) {
      for (l=0;l<tdChildren[k].childNodes.length;l++) {
         var myChild = tdChildren[k].childNodes[l];
         if (myChild.tagName==null) {
            continue;
         }
         else if (tdChildren[k].childNodes[l].tagName.toLowerCase()=="span") {
            for (m=1;m<arguments.length;m++) {
               if (tdChildren[k].childNodes[l].id==arguments[m]) {
                  tdChildren[k].childNodes[l].style.display='';
                  break;
               }
            }
         }
      }
   }
}
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question