javascript隐藏表本地存储中的行

Question

我使用这个公式来隐藏整个 HTML 表格。

function tableExpander(tableId) {
    // Our flag to determine if rows are hidden or not
    var rowsVisible = localStorage.getItem('rowsVisible-'+tableId),
        // Table handler
        table = document.getElementById(tableId);

    // "rowHidden" not exists in localStorage yet
    if (rowsVisible === null) {
        rowsVisible = true;
    } else {
       // localStorage return string
        rowsVisible = rowsVisible === 'true' ? true : false;
    }

    toggleDisplay(table, rowsVisible ? '' : 'none');

    table.getElementsByClassName('toggleBtn')[0].addEventListener('click', function() {
        toggleDisplay(table);
    }, false);

    function toggleDisplay(tbl) {    
        var tblRows = table.rows,
            mode = rowsVisible ? '' : 'none';

        for (i = 0; i < tblRows.length; i++) {
            if (tblRows[i].className != "headerRow") {
                tblRows[i].style.display = mode;
            }
        }

        localStorage.setItem('rowsVisible-'+tableId, rowsVisible);
        rowsVisible = !rowsVisible;
    };    
};

tableExpander('table');
tableExpander('table1');

如何修改它以一次仅隐藏 1 行，并在隐藏时将按钮颜色更改为红色？此处示例 http://jsfiddle.net/SXAZ4/85/

Answer 1

演示:http://jsfiddle.net/nEh89/31/ (代码如下)

<table>
    <tr class='row-1'>
        <td>Foo</td>
    </tr>
    <tr class='row-2'>
        <td>Bar</td>
    </tr>
    <tr class='row-3'>
        <td>Rab</td>
    </tr>
</table>

<!-- This button will toggle all elements with css class "row-1" -->
<a class='btn hide-1' data-hide-element='row-1' data-default-mode='visible'>Toggle row with class "row-1"</a>

<!-- This button will toggle all elements with css class "row-2" -->
<a class='btn hide-2' data-hide-element='row-2' data-default-mode='hidden'>Toggle row with class "row-2"</a>

<!-- This button will toggle all elements with css class "row-3" -->
<!-- if @data-default-mode is not specified it is "visible" -->
<a class='btn hide-3' data-hide-element='row-3'>Toggle row with class "row-3"</a>

    /**
 * This function toggle (shows/hides) elements and 
 * remember visibility in browsers localStorage.
 *
 * @param {String} buttonsCssClass Buttons css class which will trigger toggle action.
 * @return {Void}
 */
function toggleElements(buttonsCssClass) {
    var // Our object of flags to determine if elements are hidden or not
        elementsVisible = localStorage.getItem('elementsVisible'),
        // List of buttons
        btns = document.getElementsByClassName(buttonsCssClass);

    // "rowHidden" not exists in localStorage yet
    if (elementsVisible === null) {
        elementsVisible = {};
    } else {
       // localStorage return string
        elementsVisible = JSON.parse(elementsVisible);
    }

    // Bind buttons
    var i = btns.length,
        cls, mode, elements, x, btn;
    while (i--) {
        btn = btns[i];
        cls = btn.getAttribute('data-hide-element');
        mode = btn.getAttribute('data-default-mode');

        if (typeof elementsVisible[cls] !== 'boolean') {
            elementsVisible[cls] = (mode === 'visible' || mode === null) ? true : false;
        }

        btn.addEventListener('click', function() {
            var _cls = this.getAttribute('data-hide-element');

            elementsVisible[_cls] = ! elementsVisible[_cls];
            localStorage.setItem('elementsVisible', JSON.stringify(elementsVisible));

            toggleDisplay(_cls, elementsVisible[_cls]);
        }, false);

        toggleDisplay(cls, elementsVisible[cls], true);
    }

    function toggleDisplay(cls, visible) {    
        var elements = document.getElementsByClassName(cls);
            x = elements.length;

        while (x--) {
            elements[x].style.display = visible ? '' : 'none';   
        }

        // Change color of buttons
        var btns = document.querySelectorAll('[data-hide-element="'+cls+'"]'),
            i = btns.length;
        while (i--) {
            btns[i].style.backgroundColor = visible ? 'white' : 'red';   
        }
    };       
};

toggleElements('btn');