На 1000 ячеек
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Табленавигатор</title>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
</head>
<body>
<style id=Mystyle>
table, td {border: solid 1px; cursor: pointer}
</style>
<script>
function setTable(a,b){
var i=0,j=0,str="";
var S="", TDst='<td>'
var Tde='</td>\n',Ntd;
for(j=0; j<a; j++){
var str='\n<tr>\n'+str;
for (i=0; i<b; i++){ Ntd=b*j+i;str+=TDst+(Ntd+1)+Tde; }
str+="</tr>\n";S+=str;str="";
}
str='<table id=table>'+S+'</table>';
return str;
}
var str=setTable(33,33)
$("style#Mystyle").after(str)
</script>
<div id=Ftore></div>
<script>
//Данные Функции лишь для раскраски:
//(Можно их удалить,- удалив и 5 строк в основном теле скрипта.
//=Раскраска=
var NewColorTd = [];
function setColor(){
var ColorsBank='00,11,22,33,44,55,66,77,88,99,aa,bb,cc,dd,ee,ff';
ColorsBank=ColorsBank.split(',')
var ColorArray = [];var i=0;
for(var r=15;r>=0;r--){
for(var g=0;g<=15;g++){
for(var b=0;b<=15;b++){
ColorArray[i]=ColorsBank[r]+''+ColorsBank[g]+''+ColorsBank[b];
i++;
}}}
var N = ColorArray.length;
for(i=0; i<MaxTD; i++){
var ColorTD = Math.round(Math.random()*(N-1));
NewColorTd[i] = ColorArray[ColorTD];
}
}
</script>
<script>
var colsNext=0;
var Maxrows = $("#table tr").length;
var MaxTD = $("#table td").length;
var MaxCols = 0;
$("#table tr:first td").each(function(i) {
MaxCols=MaxCols+ parseInt($(this).attr('colspan'));
});
function setTable(a,b){
var i=0,j=0,str="";
var S="", TDst='<td>'
var Tde='</td>\n',Ntd;
for(j=0; j<a; j++){
var str='\n<tr>\n'+str;
for (i=0; i<b; i++){ Ntd=b*j+i;str+=TDst+(Ntd+1)+Tde; }
str+="</tr>\n";S+=str;str="";
}
str='<table>'+S+'</table>';
return str;
}
var TabL=setTable(Maxrows,MaxCols);
var CloneTbL = $("#Ftore").remove()
CloneTbL.append(TabL);
//Clone Class in TD Double Table
var TBL2 = CloneTbL.find("table");
function setAnalogTd (j,col,rowspan,colspan,set_Class) {
for(x=j; x<j+rowspan; x++){
for(z=col; z<col+colspan; z++){
var TR=TBL2.find("tr").eq(x);
var TD=TR.find("td").eq(z);
TD.addClass("V "+set_Class);
}
}
}
//Calculate next column;
var colsNext=0;
function tstcolsNext(j){//
var TR=TBL2.find("tr").eq(j);//alert(j)
TR.find("td").each(function(v){
if(!$(this).hasClass("V")){/*alert(j+"Colonka="+v);*/colsNext=v;return false;}
});return colsNext;
}
//Crawling cells and setting Class;
setColor(); //Цвет - можно выкинуть
var ColorTD=0; //Цвет - можно выкинуть
$("#table tr").each(function(j) {
$(this).find("td").each(function(i) {
var color = "#"+NewColorTd[ColorTD]; //Цвет - можно выкинуть
$(this).css({"background-color":color}); //Цвет - можно выкинуть
if(!i&&!j)colsNext=0;
if(j)tstcolsNext(j);//alert(colsNext);
var col=colsNext;
var colspan = parseInt($(this).attr('colspan'));
colsNext = colsNext + colspan;
if(colsNext>=MaxCols)colsNext=0;
var rowspan = parseInt($(this).attr('rowspan'));
var set_Class = 'tr_'+j+'_col_'+col
$(this).addClass(set_Class);
setAnalogTd (j,col,rowspan,colspan,set_Class)
ColorTD++; //Цвет - можно выкинуть
});
}); TBL2.find("td").removeClass("V");
</script><!-- Конец Setting-действий -->
<script><!-- Тестирующая часть выбранной ячейки -->
function extract_TR_andCol(klass) {
var tr = parseInt(klass.replace(/tr_(\d+)[^\d].*/ig,'$1'));
var col = parseInt(klass.replace(/.*?col_(\d+)(?:\s|$)/ig,'$1'));
return [tr,col]
}
// =Обход периметра ячейки!
var TBL1=$("#table tr");
// Тест Реального rowspan - если обе или более строки,
// если обе или более строк (таблицы) подряд полностью заняты элементами с rowspan > 1;
//=====================================
function TstRealrowspan(klass,a,rowspan) {
for(var i=1;i<rowspan; i++){
if(!TBL2.find("tr").eq(a[0]-1+i).find("td").eq(a[1]).hasClass(klass)){
rowspan=i-1; break;
}
} return rowspan;
}
function bypassing_perimeter(klass,colspan,rowspan) {
var a=extract_TR_andCol(klass);
if(rowspan>1){rowspan=TstRealrowspan(klass,a,rowspan)};//
var Leftarray=[];
var Toparray=[];
var Rightarray=[];
var Bottomarray=[];
//Считываем все левые прилегающие элементы(сверху вниз)
if(a[1]==0){ Leftarray=[];
} else {
for(var i=0; i<rowspan; i++){
var elem=TBL2.find("tr").eq(a[0]+i).find("td").eq(a[1]-1).attr("class")
if(i&&(Leftarray[i-1]!=elem))Leftarray.push(elem);
if(i==0)Leftarray.push(elem);
}}
//Считываем верхние прилегающие элементы(слево-направо)
if(a[0]==0){ Toparray=[];
} else {
for(var i=0; i<colspan; i++){
var elem=TBL2.find("tr").eq(a[0]-1).find("td").eq(a[1]+i).attr("class")
if(i&&(Toparray[i-1]!=elem))Toparray.push(elem);
if(i==0)Toparray.push(elem);
}}
//Считываем все правые прилегающие элементы(сверху вниз)
if((a[1]+colspan-1)==MaxCols-1){ Rightarray=[];
} else {
for(var i=0; i<rowspan; i++){
var elem=TBL2.find("tr").eq(a[0]+i).find("td").eq(a[1]+1).attr("class")
if(i&&(Rightarray[i-1]!=elem))Rightarray.push(elem);
if(i==0)Rightarray.push(elem);
}}
//Считываем нижние прилегающие элементы(слево-направо)
if((a[0]+rowspan-1)==Maxrows-1){ Bottomarray=[];
} else {
for(var i=0; i<colspan; i++){
var elem=TBL2.find("tr").eq(a[0]+1).find("td").eq(a[1]+i).attr("class")
if(i&&(Bottomarray[i-1]!=elem))Bottomarray.push(elem);
if(i==0)Bottomarray.push(elem);
}}
return [Leftarray,Toparray,Rightarray,Bottomarray]
}
//=== Клик по ячейке ====//
$("#table td").click(function() {
var klass=$(this).attr('class');
var colspan=$(this).attr('colspan');
var rowspan=$(this).attr('rowspan');
var ALLArray = bypassing_perimeter(klass,colspan,rowspan)
alert('Левые прилегающие элементы:\n' + ALLArray[0]+'\n\nВерхние прилегающие элементы:\n' + ALLArray[1]+'\n\nПравые прилегающие элементы:\n'+ALLArray[2]+'\n\nНижние прилегающие элементы:\n'+ALLArray[3])
})
</script>
</body>
</html>