ansaurus

Question

Can I make one row show at a time in a table?

Answer 1

A:

This is your vanilla Javascript solution (although I'd rather go with 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';
    }
}

Also, if you want to initialize your display, you should call optionSelected() once in an onLoad handler.

Marko Dumic 2010-03-09 17:11:50

Answer 2

A:

Instead of looping on DOM nodes, you can change style rules and use the speed of the CSS selectors instead.

Here is an example to show one line at a time and stay.
If you want to remove them at each selection you can clear the style each time you make a selection.

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

Mic 2010-03-09 17:29:23

Interesting dynamic manipulation of the stylesheet - Not sure I'd do it that way myself as the effects could potentially be too global. I'd prefer to apply hide/show operation to the specific elements to be shown or hidden. All a matter of taste,I suppose.

belugabob 2010-03-10 08:56:14

Answer 3

+2 A:

simple with jquery

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

moi_meme 2010-03-09 21:09:28

The first statement hides any and all table rows in the document. The second will show a specific row identified by the `id` attribute.

Baddie 2010-03-09 21:11:34

ansaurus

tags:

views:

answers:

Can I make one row show at a time in a table?

related questions