Difference between revisions of "Complex Tables Favlet"

From Level Access Web Labs
Jump to navigation Jump to search
Line 4: Line 4:
<a href="javascript:void((function(){var%20element=document.createElement('script');element.setAttribute('src','http://mraccess77.github.io/favlets/complex_tables.js');document.body.appendChild(element)})());"> Complex Tables Favlet </a>
<a href="javascript:void((function(){var%20element=document.createElement('script');element.setAttribute('src','https://mraccess77.github.io/favlets/complex_tables.js');document.body.appendChild(element)})());"> Complex Tables Favlet </a>

Revision as of 23:58, 30 August 2015

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


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.style.backgroundColor = 'antiqueWhite';	
						s.style.color = 'black';

	if (!sentinel) {
	  alert('no valid headers found');
else {
  alert('No table cells found');