Complex Tables Favlet

From Level Access Web Labs
Revision as of 21:45, 6 November 2018 by Oedwards (talk | contribs) (Clean up the instructions on how to "install" the Favlet)
Jump to navigation Jump to search

IE or Firefox: Right click or press the applications key on the Favlet link. Choose Add to Favorites, Add to Bookmarks or Bookmark this Link to add this Favlet to your Favorites or Bookmarks.

Chrome or Safari: drag the Favlet link to your browser's bookmarks bar.

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');
}	

})();