i have requirement this
number of rows generated in table dependant on dynamically user in 1 scenario 1 tr there, time 4 trs or time 8 trs..
maximum 10 trs can there , each trs have 6 tds each td contain drop down items or radio buttons, selection of each of item in td trigger whether next td in same row(trs) displayed or not.
to implement above using div tags , it, hidding or making visible
the challenge facing
1) not able create unique id td's in 10 tr's because of which, if hide 1 class id of 1 td in 2nd tr, hide corresponding 2nd tds in next sequential tr's.
this because of class id genarating programmatically in loop.
can please suggest me how can proceed implement requirement???
2) can give id td @ run time??
the outline below rudimentary element creation program. operate create html document based on user data. http://jsfiddle.net/3rvdk/
(function(){ function get_element_id( elem ) { return number(elem.id.split('_')[1]); } /** * build_guid_generator * * @returns {function} generate global unique identifiers */ function build_guid_generator(){ var named_ids = {}; var = 0; return function( ns ){ named_ids[ns] = named_ids[ns] || 0; return named_ids[ns]++; }; } var guid = build_guid_generator(); /** * build_drop_down * * creates <select> html element global unique identifier * options object literal keys become text of option * * @param {htmlelement} container * @param {object} options * @param {function} change_event - function execute when value 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 <td> html element global unique identifier , attaches 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 <tr> html element global unique identifier , attaches 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 = 0; ( ; < 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( ) + 1 ) ); console.log( next_sibling ); if ( this.value === 'false' ) { next_sibling.hide(); } else { next_sibling.show(); } }); } } } test_data_set( user_data ); })(); 
Comments
Post a Comment