Привет всем и с Новым 2026 годом!
Строю на основе таблицы некое подобие меню.
Данные различной длины, поэтому таблица - самое то!
Да еще чередование цветом и выделение активной строки.
Есть маленький скрипт, придающий табличке схожесть с меню по нажатию клавиш.
Есть такая проблема: выполнив переход на следующую строку, могу оказаться за краем окна. Мышом прокрутил - все нормально.
Как определить, что строка уходит "за горизонт"
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<!--script type=text/javascript src=scaner.js>
</script-->
<style>
.odd {background:#ffffcc;}
.ord {background:#c1ff80;}
.sel {background:#b300b3;}
.des {color:gray;}
table {overflow: hidden; }
</style>
</head>
<body onkeypress="KBpress();" onkeydown="KBdown();" onclick="Click();" >
<div id=Service style="display:none;position:absolute;top:-200px;right:2000px;">
<p id="KEYBOARD" />
</div>
<table id=tbl >
<tbody>
<tr id=1>
<td width=80% >Базовая ставка
</td>
<td>нет
</td>
</tr>
<tr class=des>
<td>Кроме:
</td>
<td>
</td>
</tr>
<!-- input type=text maxlength=50 style="width:30em;border:none;" value="-->
<tr id=2 class="odd" orig="odd" >
<td >
Бесшовные трубы из коррозионностойкой
(нержавеющей) стали диаметром до 426 мм
включительно , происходящих из Украины для прочих
предприятий
</td>
<td>18.96 %
</td>
</tr>
<tr id="3" class="ord" orig="ord" >
<td >
Бесшовные трубы из коррозионностойкой
(нержавеющей) стали диаметром до 426 мм
включительно , происходящих из Украины для
предприятия: частное акционерное общество
"Сентравис Продакшн Юкрейн" (53201, Украина,
Днепропетровская область, г. Никополь, проспект
Трубников, 56)
</td>
<td> 4.32 %
</td>
</tr>
<tr id=4 class="odd" orig="odd">
<td >
Бесшовные трубы из коррозионностойкой
(нержавеющей) стали диаметром до 426 мм
включительно , происходящих из Украины для
предприятия: общество с ограниченной
ответственностью "Интерпайп Нико Тьюб" (53201,
Украина, Днепропетровская область, г. Никополь,
проспект Трубников, 56)
</td>
<td>4.32 %
</td>
</tr>
<tr id=5 class="ord" orig="ord">
<td >
Бесшовные трубы из коррозионностойкой
(нержавеющей) стали диаметром до 426 мм
включительно , происходящих из Украины для
предприятия: общество с ограниченной
ответственностью "Производственное объединение
"ОСКАР" (49044, Украина, г. Днепропетровск,
бульвар Екатеринославский, д. 2, офис 500)
</td>
<td>18.96 %
</td>
</tr>
<tr class="odd" orig="odd" id=6 >
<td >нефтепроводные, газопроводные и горячедеформированные трубы общего назначения: все диаметром до 820 миллиметров включительно, страной происхождения которых является Украина, при наличии сертификата производителя
</td>
<td>
</td>
</tr>
<tr class="ord" orig="ord" id=7>
<td>нефтепроводные, газопроводные и горячедеформированные трубы общего назначения: все диаметром до 820 миллиметров включительно, страной происхождения которых является Украина
</td>
<td>
</td>
</tr>
<tr class="odd" orig="odd" id=8 >
<td>нефтепроводные, газопроводные и горячедеформированные трубы общего назначения: все диаметром до 820 миллиметров включительно для ОАО "Днепропетровский трубный завод" (49068, Украина, г. Днепропетровск, ул. Маяковского, д. 31)
</td>
<td>
</td>
</tr>
<tr class="ord" orig="ord" id=9 >
<td id=9>нефтепроводные, газопроводные и горячедеформированные трубы общего назначения: все диаметром до 820 миллиметров включительно для ОАО "ИНТЕРПАЙП Нико Тьюб" (53201, Украина, Днепропетровская область, г. Никополь, пр. Трубников, д. 56)
</td>
<td>
</td>
</tr>
<tr class="odd" orig="odd" id=10>
<td>нефтепроводные, газопроводные и горячедеформированные трубы общего назначения: все диаметром до 820 миллиметров включительно для публичного акционерного общества "ИНТЕРПАЙП Нижнеднепровский трубопрокатный завод" (ПАО "ИНТЕРПАЙП НТЗ"), (49081, Украина, г. Днепропетровс ул. Столетова, д. 21)
</td>
<td>
</td>
</tr>
<tr class="ord" orig="ord" id=11>
<td>нефтепроводные, газопроводные и горячедеформированные трубы общего назначения: все диаметром до 820 миллиметров включительно для публичного акционерного общества "ИНТЕРПАЙП Новомосковский трубопрокатный завод" (ПАО "ИНТЕРПАЙП НМТЗ"), (51200, Украина, Днепропетровская область, г. Новомосковск, ул. Сучкова, д. 115)
</td>
<td>
</td>
</tr>
<tr class="odd" orig="odd" id=12>
<td>Бесшовные трубы круглого поперечного сечения из коррозионностойкой стали наружным диаметром до 650 мм включительно, изготовленные методом горячей деформации, происходящие из КНР
</td>
<td>
</td>
</tr>
<tbody>
</table>
<script >
var CurrId=2;
var MaxId=12;
var direct;
SetFocus(CurrId);
// var oNew= document.getElementById(cId);
// status = oNew.innerHTML;
//
function KillFocus( ){
var oNew= document.getElementById(CurrId);
if( oNew) {oNew.className = oNew.orig;};
};
// function document.onmousemove(){
// var tag=document.elementFromPoint( event.clientX,event.clientY);
// status=tag.innerHTML;
// if (tag.tagName=="TR")
// { alert(tag.tagName); tag.style.color='red'; }
// };
// function document.onkeydown(){
function KBdown(){
var event=window.event;
var key= event.keyCode;
var cNext=CurrId;
switch ( key ){
case 38 : //up
if ( cNext >1 ){
direct =true;
SetFocus(--cNext);
};
dropkey(event);
break;
case 40 : //down
if ( cNext < MaxId ){
direct =false;
SetFocus(++cNext);
};
dropkey(event);
break;
};
};
function KBpress(){ /* only Chars key*/
var event=window.event;
var key= event.keyCode;
status=key;
};
function Click(){
var e = e ? e : window.event;
var tag =document.elementFromPoint( e.clientX,e.clientY).parentElement;
status=tag.id;
if(tag.id) { SetFocus(tag.id); };
};
function dropkey(event){
try { event.keyCode =0;
event.charCode =0;
event.which =0;
event.key ='';
window.event.returnValue = false;
/*alert('Dropkey');*/
}
catch( err) {};
return false;
}
function SetFocus( cId ){
KillFocus( );
var oNew= document.getElementById(cId);
var Parent = oNew.parentElement;
var CurrTop = oNew.offsetTop;
var CurrH = oNew.clientHeight;
var offHeight = oNew.offsetHeight ;
//var offHeight = oNew.offsetTop ;
// alert( CurrTop +' '+CurrH+' '+' '+offHeight);
// oNew.scrollIntoView(direct);
// status = oNew.innerHTML;
oNew.className = oNew.className +' sel';
CurrId = cId;
};
</script>
</body>
