Можно ли показывать по одной строке за раз в таблице? - PullRequest
Новая
       6

Можно ли показывать по одной строке за раз в таблице?

0 голосов
/ 09 марта 2010

У меня есть функция 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 ]

2 голосов
/ 10 марта 2010

просто с JQuery 

$('tr').hide();
$('#'+strTest).show();
0 голосов
/ 09 марта 2010

Вместо зацикливания на узлах DOM вы можете изменить правила стиля и использовать вместо этого скорость CSS-селекторов.

Вот пример, показывающий по одной строке за раз и оставшийся.
Если вы хотите удалять их при каждом выделении, вы можете очищать стиль каждый раз, когда делаете выделение. 

<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>
0 голосов
/ 09 марта 2010

Это ваше ванильное решение 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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...