Question

I have a requirement like this

Number of Rows generated in a table dependant on dynamically by user
In one scenario one TR will be there, some time 4 TRs or some time 8 TRs..

Maximum 10 TRs can be there and each TRs will have 6 Tds
Each TD will contain the Drop down items or radio buttons,
Selection of each of item in the TD will trigger
whether the next TD in that same row(TRs) is displayed or not.

TO implement the Above I am using the Div tags and with it, I am Hidding it or making it visible

The challenge I am facing

1) I am not able to create the Unique id for all the TD’s in all the 10 TR’s
because of which, if i hide one Class Id of one TD in 2nd TR, then it also
hide the corresponding 2nd TDs in the next sequential TR’s.

This is because of the Class Id I am genarating it programmatically in a FOR loop.

Can you please suggest me how I can proceed to implement this requirement???

2) Can we give the Id for the TD at run time??

Answer 1

The outline below is a very rudimentary element creation program. It will operate to create the HTML document based on certain user data. 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 );

})();