Okay, a couple of points that come to mind.
First, the easiest way to get a list of all selected cells, is to differentiate by className instead of a custom attribute.
I would simply give the table cells a class - say tblNorm, tblSelected.
You can then use document.getElementsByClassName to get a list of either type.
Of course, it's not that many lines to get all of the selected items if you do use a custom attribute. In that case, I suppose I'd just get a list of all of the table cells, then see if the attribute was true or false.
Something like this perhaps:
<!DOCTYPE html>
<html>
<head>
<script>
function makeTbl(max)
{
var table, tbody, tr, td, x, y, cellIndex;
table = document.createElement('table');
tbody = document.createElement('tbody');
table.appendChild(tbody);
cellIndex = 0;
for (y=0; y<max; y++)
{
tr = document.createElement('tr');
for (x=0; x<max; x++)
{
td = document.createElement('td');
td.appendChild( document.createTextNode(" ["+x+","+y+"] ") );
td.setAttribute('cellIndex', cellIndex);
tr.appendChild(td);
cellIndex++;
}
tbody.appendChild(tr);
}
return table;
}
function onCellClickClassChange()
{
var td = this;
if (td.className == 'tblSel')
td.className = 'tblNorm';
else
td.className = 'tblSel';
}
function onCellClickAttribChange()
{
var td = this;
var curState = td.getAttribute('selected');
if ((curState == undefined) || (curState == 'false'))
curState = true;
else
curState = false;
td.setAttribute('selected', curState);
}
function attachHandlerToChildrenByTag(parent, eventType, functionToAttach, tagName)
{
var mArray = parent.getElementsByTagName(tagName);
var i, len;
len = mArray.length;
for (i=0; i<len; i++)
{
mArray[i].addEventListener(eventType, functionToAttach, true);
}
}
function ShowSelected1()
{
var tgt = document.getElementById('tgtDiv_1');
var selList = tgt.getElementsByClassName('tblSel');
var i, n = selList.length;
var str = '';
for (i=0; i<n; i++)
{
if ((i+1)%6 == 0)
str += "\n";
str += selList[i].getAttribute('cellIndex');
if (i != (n-1))
str += ", ";
}
alert(str);
}
function ShowSelected2()
{
var tgt = document.getElementById('tgtDiv_2');
var tdList = tgt.getElementsByTagName('td');
var i, a=0, n = tdList.length;
var str = '';
for (i=0; i<n; i++)
{
if (tdList[i].getAttribute('selected') == 'true')
{
if ((a+1)%6 == 0)
str += "\n";
str += tdList[i].getAttribute('cellIndex');
str += ", ";
a++;
}
}
alert(str);
}
function myOnInit()
{
var tgt = document.getElementById('tgtDiv_1');
var tbl = makeTbl(5);
attachHandlerToChildrenByTag(tbl, 'click', onCellClickClassChange, 'td');
tgt.appendChild(tbl);
tgt = document.getElementById('tgtDiv_2');
tbl = makeTbl(5);
attachHandlerToChildrenByTag(tbl, 'click', onCellClickAttribChange, 'td');
tgt.appendChild(tbl);
}
</script>
<style>
body
{
cursor: default;
}
.tblSel
{
background-color: #ddd;
}
</style>
</head>
<body onload='myOnInit();'>
<div id='tgtDiv_1'></div>
<button id='listSelectedBtn1' onclick='ShowSelected1()'>show selected cell indices</button>
<div id='tgtDiv_2'></div>
<button id='listSelectedBtn2' onclick='ShowSelected2()'>show selected cell indices</button>
</body>
</html>