我可以在表格中一次显示一行吗？答案

【问题标题】：Can I make one row show at a time in a table?我可以在表格中一次显示一行吗？
【发布时间】：2010-03-09 16:31:44
【问题描述】：

我有一个 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>

【问题讨论】：

我们可以看到您的表格的标记和“ddlSelect”字段吗？
@belugabob - 抱歉，我在查找时迷路了。
你能澄清你的问题吗？您发布的内容似乎符合您的需要：根据用户的选择一次显示一行
您的示例中有错字。即“

标签： c# javascript html asp.net-mvc

【解决方案1】：

简单的jquery

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

【讨论】：

第一条语句隐藏文档中的所有表格行。第二个将显示由id 属性标识的特定行。

【解决方案2】：

这是您的原生 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';
    }
}

另外，如果你想初始化你的显示，你应该在 onLoad 处理程序中调用一次optionSelected()。

【讨论】：

【解决方案3】：

您可以更改样式规则并改用 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>

【讨论】：

对样式表进行有趣的动态操作 - 我不确定自己是否会这样做，因为效果可能过于全局化。我更喜欢将隐藏/显示操作应用于要显示或隐藏的特定元素。我想都是口味问题。