代码之家 › 专栏 › 技术社区 › MrM

如何循环表行以切换显示样式?

asp.net-mvc html javascript c#

MrM · 技术社区 · 14 年前

我想用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>

3 回复 | 直到 14 年前

Paul 14 年前

首先,考虑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.
    }

bcherry 14 年前

使用jquery可以很容易地做到这一点:

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

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

Zango 14 年前

如果我能正确地理解你,这会对你有所帮助。

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

推荐文章

Robert King · Unity C#语法问题-转换位置

1 年前

JBryanB · 如何从基本抽象类访问类属性

1 年前

Anders Sewerin Johansen · 使用Moq提供一个利用mock的具体对象

1 年前

Community wiki · 基于两个参数在文本框中使用上下文键自动完成?

1 年前

Community wiki · SqlConnections,Parallel.For,一个旧的C#应用程序,初始化SqlConnections时随机挂起

1 年前

kling · LINQ生成的IEnumerable与原始列表之间的关系是什么?[副本]

2 年前

Adil15 · 以下方法和属性之间的调用不明确-Linq和MoreLinq

2 年前

law · 检查答案按钮的输入字符串格式不正确

2 年前

Laurian Avrigeanu · 如何执行嵌套的ContextMenu实现?

2 年前

i_sniff_ket · 在unity之外使用unity类

2 年前