Solved

Access span id by using the row index value

Posted on 2004-08-19
3
843 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
3 Comments
 
LVL 36

Accepted Solution

by:
Zyloch earned 500 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now