Complex Tables Favlet

From Level Access Web Labs
Revision as of 02:28, 5 February 2014 by Javila (talk | contribs)
Jump to navigation Jump to search

Right click or press the applications key on this link. Choose Add to Favorites or Add to Bookmarks to add this Favlet to your Favorites or Bookmarks.

This Favlet takes the associated header cell content from each cell referenced by a headers attribute and places them on-screen in the data cell in the same way that a screen reader may present the headers to users of the screen reader.

Complex Tables Favlet

Sample code

javascript:(function(){

var el = document.querySelectorAll('td, th');  

var str;
var headers=[];
var sentinel;

if (el.length>0) {
 	for (var i=0; i<el.length; i++) {
			if (el.item(i).hasAttribute('headers')) {
				str = el.item(i).getAttribute('headers');
				headers = str.split(' ');
				for (var ii=0; ii < headers.length; ii++) {	
					if (document.getElementById(headers[ii])) {
						sentinel = 1;
						s = document.createElement('Span');
						t = document.createTextNode(document.getElementById(headers[ii]).textContent+" ");
						s.appendChild(t);
						s.style.backgroundColor = 'antiqueWhite';	
						s.style.color = 'black';
						el.item(i).appendChild(s);
					}
				}

			 } 
		 str='';
		 header='';
		 t='';
	}
	if (!sentinel) {
	  alert('no valid headers found');
	}
}
else {
  alert('No table cells found');
}	

})();