Get An Element Within a Table Row

Question

Firstly, If possible, I would like to do this without JQuery, and purely Javascript.

Ok so I have an html table with rows getting added dynamically to it.

In each row is a:

• Select Element (id = "ddFields")
• Text Input Element (id = "tfValue")
• Button Element (no id)

The Button Element removes the row for which it is situated

The Select Element has a default option of "" and then other 'valid' options

The Text Input is added to the row but it is hidden.

All elements are in the same

Basically I would like for the Select Element to show the hidden text input element if the selected index is != 0

so far I have this for my onchange function:

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 >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');

   }
}

Answer 1

Finally figured it out. So here it is:

SCENARIO: A table that has rows added to it dynamically.

In each row there is a select element and an input text element.

The select element changes text-value of the input text element based on the index of the select element.

in your select element set the onchange function to this:

onchange="selectionChanged(this)"

then create a javascript function shown below:

function selectionChanged(dropdown)
{
   //get the currently selected index of the dropdown
   var index     = dropdown.selectedIndex;

   //get the cell in which your dropdown is
   var cell      = dropdown.parentNode;located

   //get the row of that cell
   var row       = cell.parentNode;

   //get the array of all cells in that row 
   var cells     = row.getElementsByTagName("td");

   //my text-field is in the second cell
   //get the first input element in the second cell
   var textfield = cells[1].getElementsByTagName("input")[0]; 

   //i use the first option of the dropdown as a default option with no value
   if(index > 0)  
   {
      textfield.value = "anything-you-want";
   }
   else
   {
      textfield.value = null;
   }
}

Hope this helps whoever. It bugged me for a very long time. Thanks shub for the help! :)

Answer 2

first, I hope you are not repeating your ids. No two items should have the same id.

If you're iterating, create id1, id2, id3.

Also, this is not necessary but I suggest introducing your vars like this:

var a = x, 
    b = y,
    c = z;

If you decide to use jQuery you could just do this:

$('#tableid').on('click','button',function(){
    $(this).parent().parent().remove();
});

$('#tableid').on('change', 'select',function(){
    if($(this).val()){ $(this).next().show(); }
});

Be sure to change #tableid to match your table's id.

This assumes the text input is the very next element after the select box. If not so, adjust as necessary or ask and I'll edit.