title: Get An Element Within a Table Row
body: <p>Firstly,
  If possible, I would like to do this without JQuery, and purely Javascript.</p>
  
  <p>Ok so I have an html table with rows getting added dynamically to it.</p>
  
  <p>In each row is a:</p>
  
  <ul>
  <li>Select Element (id = "ddFields")</li>
  <li>Text Input Element (id = "tfValue")</li>
  <li>Button Element (no id)</li>
  </ul>
  
  <p>The Button Element removes the row for which it is situated</p>
  
  <p>The Select Element has a default option of "" and then other 'valid' options</p>
  
  <p>The Text Input is added to the row but it is hidden.</p>
  
  <p>All elements are in the same</p>
  
  <p>Basically I would like for the Select Element to show the hidden text input element if the selected index is != 0</p>
  
  <p>so far I have this for my onchange function:</p>
  
  <pre><code>function itemChanged(dropdown) //called from itemChanged(this)
  { 
     var cell         = dropdown.parentNode;
     var row      = cell.parentNode;
     var rowIndex = dropdown.parentNode.parentNode.rowIndex;
     var index            = dropdown.selectedIndex;
     var option           = dropdown.options[dropdown.selectedIndex].text;
  
     if(index &gt;0)
     {    
       alert(row);
       var obj=row.getElementById("tfValue"); //tfValue is the Text Field element
       alert(obj);
       //row.getElementById("tfValue").hidden = "false"; //doesn't work
       //row.getElementById("tfValue").setAttribute("hidden","true"); //doesn't work
     }
     else
     {
        alert('none selected');
  
     }
  }
  </code></pre>