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

我可以在一张桌子上一次显示一行吗?

asp.net-mvc html javascript c#

MrM · 技术社区 · 14 年前

我有一个javascript函数,可以切换表中行的显示。现在的困境是我想一次显示一行。有什么好方法可以做到这一点?

    function optionSelected() {
        var optionSelect = document.getElementById('ddlSelect');
        var strTest = optionSelect.options[optionSelect.selectedIndex].value;            
        var rowHeader = document.getElementById(strTest);
        var row = document.getElementById(strTest);

        if (rowHeader.style.display == '') {
            rowHeader.style.display = 'none';
            row.style.display = 'none';
        }
        else {
            rowHeader.style.display = '';
            row.style.display = '';
        }
    }  


<select id="ddlSelect" onchange="optionSelected()">
    <option value="optionA">A</option>
    <option value="optionB">B</option>
    <option value="optionC">C</option>
    <option value="optionD">D</option>
</select>

<table id="tableList">
    <tr id="optionA"><td>DisplayA</td></tr>
    <tr id="optionB"><td>DisplayB</td></tr>
    <tr id="optionC"><td>DisplayC</td></tr>
    <tr id="optionD"><td>DisplayD</td></tr>
</table>

3 回复 | 直到 14 年前

moi_meme 14 年前

简单的jquery

$('tr').hide();
$('#'+strTest).show();

Marko Dumic 14 年前

这是您的普通javascript解决方案(尽管我宁愿使用jquery):

function optionSelected() {
    var sel = document.getElementById('ddlSelect');

    for (var i=0; i<sel.options.length; i++) {
        document.getElementById(sel.options[i].value)
            .style.display = sel.options[i].selected ? '' : 'none';
    }
}â

此外,如果要初始化显示,应调用 optionSelected() 一次在OnLoad处理程序中。

Mic 14 年前

您可以更改样式规则并使用CSS选择器的速度,而不是在DOM节点上循环。

下面是一个例子,一次显示一行,然后停留。
如果要在每个选择中删除它们,则可以在每次进行选择时清除样式。

<body>
    <style id="styles">
        table tr{
            display:none;
        }
    </style>
    <select id="ddlSelect" onchange="optionSelected()">
        <option value="optionA">A</option>
        <option value="optionB">B</option>
        <option value="optionC">C</option>
        <option value="optionD">D</option>
    </select>

    <table>
        <tr id="optionA"><td>DisplayA</td></tr>
        <tr id="optionB"><td>DisplayB</td></tr>
        <tr id="optionC"><td>DisplayC</td></tr>
        <tr id="optionD"><td>DisplayD</td></tr>
    </table>
    <script>
        function optionSelected() {
            var optionSelect = document.getElementById('ddlSelect'),
                    styles = document.getElementById('styles'),
                    selector = '#' + optionSelect.options[optionSelect.selectedIndex].value,
                    rule = 'display:block';
                    if(styles.styleSheet){
                        styles.styleSheet.cssText = selector + '{' + rule + '}';
                    }else{
                        styles.appendChild(document.createTextNode(selector + '{' + rule + '}'));
                    }
        }  
    </script>
</body>

推荐文章

jpWebLearner · BenchmarkDotNet与MVC操作控制器的结合使用

1 年前

PixelScribe · 实体框架EDMX未更新ASP.NET web应用程序中的连接字符串

1 年前

ankara · 带有添加条件组的任意位置滑块

1 年前

Akshay Malvankar · 我对在asp中使用asyn、await()和run()方法感到困惑。净mvc[关闭]

2 年前

Pablo · 为什么POST-request方法返回null,但GET-request返回正确的对象

2 年前

AlÄ±yev Rufet · 无法构造某些服务(验证服务描述符的服务类型时出错:Restaurant.Data.IAppRepository

2 年前

Tom Rushton · 启动时路由错误。当ASP出现404或500错误时,cs不会重定向到控制器。NET核心MVC

2 年前

lasha · 对象引用未设置为对象的实例。在里面Net mvc框架[重复]

2 年前

Ken Janka · 迁移ASP。NET Core 5应用程序。6(使用最小网络托管模型)

2 年前

nnmmss · 根据查询字符串值激活li

2 年前