Как я могу перебирать строки таблицы, чтобы переключать стиль отображения?

Question

Я хотел бы переключить строку отображения для таблицы в JavaScript. Как мне это сделать?

<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

Сначала рассмотрим jquery. Это большая помощь для таких вещей.

Во-вторых, если вы не собираетесь использовать jquery, то вы хотите сделать что-то вроде этого:

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

Если я вас правильно понял, это должно вам помочь.

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

Answer 3

Вы можете легко сделать это с помощью jQuery:

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

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