Форум

bes · #21 (**permalink**) 09.07.2012, 21:13

Сообщение от Deff

bes,
Ну моё предложение прозвучало - проставить каждой ячейке индивидуальный класс
затем обойти и добавить классы соседских, добавляем только первый класс в списке, тады у нас классы всех сторон в атрибуте класс и поиск соседних перебором всех классов в текущей ячейке, нaчиная со второго в списке

Честно говоря, не совсем понял как это будет работать для ячеек с rowspan: например, в таблице из моего последнего примера, как добавить классы соседних ячеек к ячейке, в которой значение 5 (эта ячейка первая в строке, следующая за ней в строке ячейка со значением 6, но не 2).

Deff · #22 (**permalink**) 09.07.2012, 21:19

Сообщение от bes

эта ячейка первая в строке, следующая за ней в строке ячейка со значением 6, но не 2

Дык и класс у нее будет соответствующий
Яж написал как классы проставить - номер строки ячейки и номер столбца... (Да забить - просто по себе заю - что тяжело перейти к иным идеям , при наличии достаточно удачных своих

Твоя реализация тоже интересна

bes · #23 (**permalink**) 09.07.2012, 21:28

Сообщение от Deff

Дык и класс у нее будет соответствующий
Яж написал как классы проставить - номер строки ячейки и номер столбца... (Да забить - просто по себе заю - что тяжело перейти к иным идеям , при наличии достаточно удачных своих

Дело не в этом, в данном случае кодом было бы понятнее, чем словами

bes · #24 (**permalink**) 10.07.2012, 10:49

<!doctype html>
<style>
  table, td {border: solid 1px; cursor: pointer}
</style>

<table id="table">
    <tr>
        <td rowspan="3">0</td>
        <td>1</td>
        <td>16</td>
        <td rowspan="2" colspan="2">2</td>
        <td colspan="3">3</td>
        <td>4</td>
    </tr>
    <tr>
        <td colspan="2">5</td>
        <td  rowspan="2">6</td> 
        <td colspan="2">7</td>
        <td>17</td>
    </tr>
    <tr>
        <td>9</td>
        <td>10</td> 
        <td>11</td> 
        <td>12</td>
        <td>14</td>
        <td>15</td>
        <td>18</td>
    </tr>
</table>


<script>
window.onload = function () {//onload begin
  var table = document.getElementById('table');
  var len = table.rows.length;
  var row, cell, td, colspan, rowspan, m;

  for (var i = 0; i < len; i++) {
    row = table.rows[i];
    for (var j = 0; j < row.children.length; j++) {
      cell = row.children[j];
      colspan = cell.getAttribute('colspan');
      if (colspan) {
        for (var k = 1; k < colspan; k++) {
          td = row.insertCell(j + k); 
          td.innerHTML = cell.innerHTML; 
          td.style.display = 'none';
        }
        j += colspan - 1;
      }
    }
  }

  for (var i = 0; i < len; i++) {
    row = table.rows[i];
    for (var j = 0; j < row.children.length; j++) {
      cell = row.children[j];
      rowspan = cell.getAttribute('rowspan');
      if (rowspan) {
        colspan = cell.getAttribute('colspan');
        if (!colspan) {
          colspan = 1; 
        }
        for (var m = 1; m < rowspan; m++) {
          for (var k = 0; k < colspan; k++) {
            td = table.rows[i+m].insertCell(j + k); 
            td.innerHTML = cell.innerHTML; 
            td.style.display = 'none';
          }
          j += colspan - 1;
        }
      }
    }
  }


  table.onclick = function(e) {//onclick begin
    e = e || event;
    var target = e.target || e.srcElement; 
    var previous, colspan, index, next, p, n;

    if (target.parentNode.tagName == 'TR') {//if begin
      previous = target.previousElementSibling;
      if (previous) {
        p = previous.innerHTML;
      } else {
        p = 'нет';
      }

      colspan = target.getAttribute('colspan');
      if (!colspan) {
        colspan = 1; 
      }
      index = target.cellIndex + parseInt(colspan);
      next = target.parentNode.children[index];
      if (next) {
        n = next.innerHTML;
      } else {
        n = 'нет';
      }
           
      alert('предыдущий: ' + p + '\nследующий: ' + n);

    }//if end    

  }//onclick end
   
}//onload end
</script>

Deff · #25 (**permalink**) 11.07.2012, 21:36

Гы -

Табло-навигатор по соседним ячейкам от выбранной
*на выходе имеем массив из 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>

Aetae · #26 (**permalink**) 11.07.2012, 21:49

Код:

class is a reserved identifier

function extract_TR_andCol(class) {
showhtml (line 145, col 27)

Deff · #27 (**permalink**) 11.07.2012, 22:05

Aetae,
CПС - (*В опере не кажет ошибку

Aetae · #28 (**permalink**) 11.07.2012, 22:58

Сообщение от Deff

Aetae,
CПС - (*В опере не кажет ошибку

На самом деле ваш вариант с классами - тот же вариант виртуальной модели, только с лишними телодвижениями.
Куда менее затратно составить виртуальный массив содержащий только индексы соседей и обращаться к нему напрямую при запросе.

Deff · #29 (**permalink**) 11.07.2012, 23:08

Сообщение от Aetae

Куда менее затратно составить виртуальный массив содержащий только индексы соседей и обращаться к нему напрямую при запросе.

Ну первое - для ускорения можно и по id поскольку класс единственный
Второе Чтобы составить индексы соседей нун знать начальный номер колонки для первой ячейки в строке(что для варианта перекрытия с rowspan лесенкой Скрин весьма и весьма - непросто - которую простейшей методой не определишь, есть еще камень: Если все ячейки в строке имеют rowspan более единицы -считыванием индекcа tr, то вроде как последущей строки tr вроде как и нет
Так что считаю - кроме простановки id, а не класса - шустрее и универсальнее - не выполнить (хотя может я ошибаюсь - но пока доволен результатом проделанного

Deff · #30 (**permalink**) 12.07.2012, 00:04

На 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>

Форум

Справочник

Discord чат

Курсы javascript