<!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=function(){return '<td colspan="'+Math.floor(Math.random()*3+1)+'" rowspan="'+Math.floor(Math.random()*3+1)+'">'};
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=function(){return '<td colspan="'+Math.floor(Math.random()*3+1)+'" rowspan="'+Math.floor(Math.random()*3+1)+'">'};
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>
Вот так, для полного испытания.)) |
Aetae,
:) А пояснения - можно ? - табла весьма кривая создана Воть ее вид в дебагере (и то Опера часть тегов Выправила:
<!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></head>
<body>
<style id="Mystyle"></style>
<table id="table">
<tbody>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td colspan="0" rowspan="3" style="background-color: rgb(102, 51, 34)" class="tr_3_col_3"></td>
<td colspan="0" rowspan="2" style="background-color: rgb(102, 255, 153)" class="tr_3_col_3"></td>
<td colspan="1" rowspan="3" style="background-color: rgb(85, 136, 102)" class="tr_3_col_3"></td>
<td colspan="2" rowspan="2" style="background-color: rgb(221, 204, 68)" class="tr_3_col_4"></td>
<td colspan="3" rowspan="0" style="background-color: rgb(102, 0, 204)" class="tr_3_col_6"></td>
<td colspan="2" rowspan="2" style="background-color: rgb(204, 221, 119)" class="tr_3_col_6"></td>
<td colspan="1" rowspan="1" style="background-color: rgb(153, 153, 187)" class="tr_3_col_9"></td>
<td colspan="3" rowspan="3" style="background-color: rgb(85, 102, 255)" class="tr_3_col_18"></td>
<td colspan="1" rowspan="1" style="background-color: rgb(51, 187, 51)" class="tr_3_col_33"></td>
<td colspan="1" rowspan="1" style="background-color: rgb(68, 238, 255)" class="tr_3_col_34"></td>
<td colspan="0" rowspan="3" style="background-color: rgb(85, 204, 85)" class="tr_3_col_35"></td>
<td colspan="3" rowspan="1" style="background-color: rgb(238, 34, 153)" class="tr_3_col_35"></td>
<td colspan="2" rowspan="0" style="background-color: rgb(102, 34, 17)" class="tr_3_col_0"></td>
<td colspan="1" rowspan="0" style="background-color: rgb(187, 102, 136)" class="tr_3_col_2"></td>
<td colspan="2" rowspan="0" style="background-color: rgb(68, 255, 51)" class="tr_3_col_3"></td>
<td colspan="0" rowspan="1" style="background-color: rgb(68, 255, 68)" class="tr_3_col_5"></td>
<td colspan="0" rowspan="1" style="background-color: rgb(0, 102, 255)" class="tr_3_col_5"></td>
<td colspan="2" rowspan="0" style="background-color: rgb(102, 255, 255)" class="tr_3_col_5"></td>
<td colspan="1" rowspan="1" style="background-color: rgb(170, 238, 34)" class="tr_3_col_7"></td>
<td colspan="0" rowspan="0" style="background-color: rgb(255, 187, 221)" class="tr_3_col_8"></td>
<td colspan="2" rowspan="3" style="background-color: rgb(0, 119, 221)" class="tr_3_col_8"></td>
<td colspan="0" rowspan="1" style="background-color: rgb(17, 153, 238)" class="tr_3_col_10"></td>
<td colspan="2" rowspan="2" style="background-color: rgb(238, 255, 187)" class="tr_3_col_10"></td>
<td colspan="3" rowspan="0" style="background-color: rgb(17, 17, 68)" class="tr_3_col_12"></td>
<td colspan="0" rowspan="3" style="background-color: rgb(187, 0, 204)" class="tr_3_col_15"></td>
<td colspan="1" rowspan="2" style="background-color: rgb(85, 85, 85)" class="tr_3_col_15"></td>
<td colspan="2" rowspan="3" style="background-color: rgb(0, 170, 0)" class="tr_3_col_16"></td>
<td colspan="0" rowspan="0" style="background-color: rgb(68, 255, 204)" class="tr_3_col_18"></td>
<td colspan="3" rowspan="0" style="background-color: rgb(136, 17, 119)" class="tr_3_col_18"></td>
<td colspan="2" rowspan="3" style="background-color: rgb(34, 238, 238)" class="tr_3_col_21"></td>
<td colspan="3" rowspan="0" style="background-color: rgb(85, 51, 85)" class="tr_3_col_23"></td>
<td colspan="1" rowspan="1" style="background-color: rgb(187, 136, 85)" class="tr_3_col_26"></td>
<td colspan="3" rowspan="0" style="background-color: rgb(204, 238, 255)" class="tr_3_col_27"></td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</tbody>
</table>
<script></script>
<script></script>
<script></script>
<!-- Конец Setting-действий -->
<script></script>
</body>
</html>
|
Ксать могу отметить - что при увеличении colspan и rowspan скорость даже слегка растет
|
Пофиксил. Не идеально, конечно, но мне лень писать правильный код.
Суть в том что просто поменял TDst='<td>' на
TDst=function(){return '<td colspan="'+Math.floor(Math.random()*3+1)+'" rowspan="'+Math.floor(Math.random()*3+1)+'">'};
И добавил вызов соответственно. Тупо рандом.) |
Aetae,
Да мну понял - бу время нарисую - хотя на деле есть готовый рандом таблица - на который тестил (но тут, в топике, тупо ограничение на символы |
:) Минималистическое решение тут http://javascript.ru/forum/offtopic/...tml#post189280 пост 13 от Raed!
|
| Часовой пояс GMT +3, время: 05:37. |