How can I loop through table rows to toggle the display style?

Question

I would like to toggle the display row for a table in javascript. How do I do this?

<script type="text/javascript" language="javascript">
        function vehicleSelected() {
            var autoSelect = document.getElementById('vehicleSelect');
            var strAuto = autoSelect.options[autoSelect.selectedIndex].value;                                
            var rowAuto = document.getElementById(strAuto);            
            for (var i = 4; i < tableList.rows.length; i++) {  
                //I am not sure how to access the id for comparison to rowAuto                    
                if (//table row == strAuto) {
                    rowAuto.style.display = '';
                } else {
                    rowAuto.style.display = 'none';
                }
            }
        }    
    </script>
<table id="tableList"> 
    <tr id="optionA"><td>Display Row A</td></tr> 
    <tr id="optionB"><td>Display Row B</td></tr> 
    <tr id="optionC"><td>Display Row C</td></tr> 
    <tr id="optionD"><td>Display Row D</td></tr> 
</table>

Answer 1

First, consider jquery. It's a big help for things like this.

Second, if you're not going to use jquery, then what you want to do is something like this:

function vehicleSelected() {  
        var autoSelect = document.getElementById('vehicleSelect');  
        var strAuto = autoSelect.options[autoSelect.selectedIndex].value;                                  
        var rows = document.getElementById('tableList').getElementsByClassName('TR');             
        for (var i = 0; i < rows.length; i++) {    
            rows[i].style.display='none'; // note: better to use a css class here
        }  
        var selectedRow = document.getElementById(strAuto); // assuming that the values are the same as the row Id's.
        selectedRow.style.display = ''; // again, better to use a Css style.
    }

Answer 2

You could do it easily with jQuery:

function vehicleSelected() {
   var autoSelect = //...
   var strAuto = //...

   $("#tableList tr").hide().filter("#" + strAuto).show();
}

Answer 3

If I correctry understood you, this should help you.

var table = document.getElementById('tableList');
for(var i=0; i<table.rows.length; i++){
   if (table.rows[i].attributes["id"].nodeValue == strAuto) {
        table.rows[i].style.display = '';
   } else {
        table.rows[i].style.display = 'none';
   }
}