javascript - 控制每个TR中TD的显示

我有这样的要求
表中生成的行数取决于用户的动态
在一个场景中，一个TR将出现，有时4 TRs或有时8 TRs。。
最多10个TRS可以在那里，每个TRS将有6 TDS
每个TD将包含下拉项或单选按钮，
选择TD中的每个项目将触发
是否显示同一行（TRs）中的下一个TD。
为了实现上面的功能，我使用了Div标记，并用它隐藏或使其可见
我面临的挑战
1）我无法为所有10个TR中的所有TD创建唯一id
因此，如果我在2nd TR中隐藏一个TD的类Id，那么它也
在下一个连续的TR中隐藏相应的第二个TDs。
这是因为我在FOR循环中以编程方式对类Id进行genarating。
你能建议我如何执行这个要求吗？??
2）我们可以在运行时提供TD的Id吗？?

最佳答案

下面的大纲是一个非常基本的元素创建程序。它将基于某些用户数据创建HTML文档。http://jsfiddle.net/3rvDk/

(function(){

    function get_element_id( elem ) {
        return Number(elem.id.split('_')[1]);
    }
    /**
     * build_guid_generator
     *
     * @returns {Function} to generate global unique identifiers with
     */
    function build_guid_generator(){
        var named_ids = {};
        var i = 0;
        return function( ns ){
            named_ids[ns] = named_ids[ns] || 0;
            return named_ids[ns]++;
        };
    }
    var guid = build_guid_generator();
    /**
     * build_drop_down
     *
     * creates a <select> HTML Element with global unique identifier
     * options is an object literal whose keys become the text of the option
     *
     * @param {HTMLElement} container
     * @param {Object} options
     * @param {Function} change_event - function to execute when the value is changed
     */
    function build_drop_down( container, options, change_event ) {
        var ddl = document.createElement('select');
        ddl.id = 'ddl_' + guid('ddl');
        for( var option in options ) if ( options.hasOwnProperty( option ) ) {

            var opt = document.createElement('option');
            opt.text = option;
            opt.value = options[option];
            ddl.add(opt, null);

        }
        ddl.hide = function(){
            this.setAttribute('style','display:none;');
        };
        ddl.show = function(){
            this.setAttribute('style','');
        };
        container.appendChild( ddl );
        ddl.onchange = change_event;
        if ( get_element_id( ddl ) > 0 ) {
            ddl.setAttribute('style','display:none;');
        }
        return ddl;

    }
    /**
     * build_cell
     *
     * creates a <td> HTML Element with global unique identifier and attaches to container
     *
     * @param {HTMLElement} container
     */
    function build_cell ( container ) {
        var td = document.createElement('td');
        td.id = 'cell_' + guid('td');
        container.appendChild( td );
        return td;
    }
    /**
     * build_row
     *
     * creates a <tr> HTML Element with global unique identifier and attaches to container
     *
     * @param {HTMLElement} container
     */
    function build_row ( container ) {
        var tr = document.createElement('tr');
        tr.id = 'row_' + guid('tr');
        container.appendChild( tr );
        return tr;
    }

    var user_data = {
        rows : 10,
        cells : 6,
        options : {
            'off' : false,
            'test' : 'value'
        }
    };

    function test_data_set ( data ) {

        var container = document.createElement('div');
        container.id = 'container';
        document.body.appendChild( container );

        var i = 0;
        for ( ; i < data.rows ; i++ ) {
            var tr = build_row( container ),
                j = 0;
            for( ; j < data.cells ; j++ ) {
                var td = build_cell( tr );
                build_drop_down( td, data.options, function( event ) {
                    console.log( this.value );
                    var next_sibling = document.getElementById( 'ddl_' + ( get_element_id( this ) + 1 ) );
                    console.log( next_sibling );
                    if ( this.value === 'false' ) {
                        next_sibling.hide();
                    } else {
                        next_sibling.show();
                    }
                });
            }
        }

    }

    test_data_set( user_data );

})();

关于javascript - 控制每个TR中TD的显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5828011/