Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 855
  • Last Modified:

Access span id by using the row index value

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
expertis
Asked:
expertis
1 Solution
 
ZylochCommented:
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
 
ZvonkoSystems architectCommented:
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
 
expertisAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now