Question

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

Answer 1

简单的jquery

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

Answer 2

这是你的vanilla 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()一次。

Answer 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>

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

3 个答案: