jQuery Example - expandable tables


To have expandable tables requires the HTML shown below in Output
(where XXXXXX and YYYYYY are placeholders for actual data).
The jQuery shown below converts the simplified input format to
the output format.


Input

<table id=XXXXXX class=expandable>
   <caption>
      Priorities
      </caption>
   <tbody>

   </tbody>
</table>


Output


  <table id=XXXXXX >
    <caption class='expanderHeader expanded' 
       data-topic=XXXXXX >
    <img class='expanderIcon expanded' 
          src='http://www.cs.unc.edu/~hedlund/icons/play_blue.png' 
          title='hide' 
          alt='expander'/> 
XXXXXX <img  
         title='YYYYYY' 
         src=http://www.cs.unc.edu/~hedlund/icons/silk/icons/information.png
         alt=information >
    </caption>
    <tbody class='expanderContent expanded' data-topic=XXXXXX >

    </tbody>
  </table>



**** jQuery solution
$('table.expandable').each( function() {
	console.log('expandable table');
	
	// constants
	var expanderImage = "<img src='http://www.cs.unc.edu/~hedlund/icons/play_blue.png' class='expanderIcon expanded'  title='hide' alt='expander' >";
	var citationImage = " <img src=http://www.cs.unc.edu/~hedlund/icons/silk/icons/information.png alt=information title= >";
	
	// parse table components
	var id = $(this).attr('id');
	var caption = $(this).find('> caption');
	var body = $(this).find('> tbody');
	var titleInfo = $(caption).attr('data-citation');
	
	// table
	$(this).removeClass('expandable');
	
	// citation
	var citation = $(citationImage).attr('title',titleInfo);
	
	// caption  ??????????  brutal hack with bold tag
	var thisCitationImage = citationImage.replace('title=','title=' + id);
	var newCaptionText = expanderImage + '&emsp;' + caption.text().trim()
            +'&emsp;&emsp;'+  thisCitationImage;
	caption.addClass('expanderHeader expanded')
	   .html(newCaptionText)
	   .append(citation)
	   ;
	   
	// table body
	body.addClass('expanderContent expanded')
	   .attr('data-topic', id)
	   ;
	
});