JavaScript 隐藏表本地存储中的行

javascript hide row in table local storage

本文关键字：存储 隐藏 JavaScript      更新时间：2023-09-26

我使用此公式隐藏整个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/

演示：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');
相关文章：