Гы -
Табло-навигатор по соседним ячейкам от выбранной
*на выходе имеем массив из 4-х подмассивов указывающих на классы:слево, сверху,справо, снизу.
все ячейки промаркированы классами вида: tr_Y_col_X
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
<style>
table, td {border: solid 1px; cursor: pointer}
</style>
*Кликаем по первой таблице
<br><br>
<table id="table">
<!-- <tr>
<td>01</td>
<td>00</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
</tr>-->
<tr>
<td rowspan="3">00</td>
<td>01</td>
<td rowspan="3">02</td>
<td colspan="2">03</td>
<td>04</td>
</tr>
<tr>
<td>05</td>
<td rowspan="2">06</td>
<td colspan="2">07</td>
</tr>
<tr>
<td id="td">09</td>
<td>10</td>
<td>11</td>
</tr>
</table>
<br><br>
<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+=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").find("td").each(function(i) {
var color = $(this).css("background-color");
var klass = $(this).attr("class");
$("#Ftore table ."+klass).css({"background-color":color});
})
//=== Клик по ячейке ====//
$("#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>