Javascript-форум - Узнать номер соответствующей ячейки

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Узнать номер соответствующей ячейки (https://javascript.ru/forum/dom-window/54145-uznat-nomer-sootvetstvuyushhejj-yachejjki.html)

Узнать номер соответствующей ячейки

Как при клике на ячейку со стрелочками узнать соответствующий ей номер столбца со значениями. Т.е кликаем на Clicks получаем 13, кликнули на CTR - получили 14

alexandr2006,
всё что вам нужно в строках 9 - 15 тут http://javascript.ru/forum/dom-windo...html#post95405

Цитата:

Сообщение от рони (Сообщение 359709)

alexandr2006,
всё что вам нужно в строках 9 - 15 тут http://javascript.ru/forum/dom-windo...html#post95405

Это если бы у нас не было rowspan :)

alexandr2006,
привелибы структуру таблицы

Цитата:

Сообщение от рони (Сообщение 359714)

alexandr2006,
привелибы структуру таблицы

<table class="list frozenTableTitle">
<thead>
<tr>
    <th rowspan="2" class="header">Date</th>
    <th rowspan="2" class="header">Profit</th>
    <th rowspan="2" class="header">System profit</th>
    <th rowspan="2" class="header">System profit, %</th>
    <th colspan="5">Source</th>
    <th colspan="3">Widgets</th>
    <th colspan="3">Advertisers</th>
    <th rowspan="2" class="header">Paid depth</th>
    <th rowspan="2" class="header">Traffic quality</th>
    <th colspan="2" rowspan="2">&nbsp;</th>
</tr>
<tr>
    <th class="header">Shows</th>
    <th class="header">Clicks</th>
    <th class="header">CTR</th>
    <th class="header">CPC</th>
    <th class="header">CPM</th>
    <th class="header">Shows</th>
    <th class="header">CTR</th>
    <th class="header">CPM</th>
    <th class="header">Shows</th>
    <th class="header">Clicks</th>
    <th class="header">CTR</th>
</tr>
</thead>

<tbody>
bla-bla

кликабельны только ячейки с классом header

alexandr2006,
вот как-то так :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">window.onload=function(){
    var table=document.getElementsByTagName('table')[0];
    var cells=table.rows[table.rows.length-1].cells;
    table.onclick=function(e){
        var t=e?e.target:window.event.srcElement;
        while(t.tagName!='TH'&&t.tagName!='TABLE')t=t.parentNode;
        if(t.tagName=='TH') {  var left = t.offsetLeft;
            for (var i=0; i<cells.length; i++)  {
               cells[i].offsetLeft ==  left && alert(i)
            }
        }
    }
}
</script>
<style type="text/css">
* {margin:0;padding:0}
.fHeader td, .fHeader tr, .fHeader th{
    border:1px solid #bbb;
}

</style>
</head>
<body>
<table class="list frozenTableTitle fHeader">
<thead>
<tr>
    <th rowspan="2" class="header">Date</th>
    <th rowspan="2" class="header">Profit</th>
    <th rowspan="2" class="header">System profit</th>
    <th rowspan="2" class="header">System profit, %</th>
    <th colspan="5">Source</th>
    <th colspan="3">Widgets</th>
    <th colspan="3">Advertisers</th>
    <th rowspan="2" class="header">Paid depth</th>
    <th rowspan="2" class="header">Traffic quality</th>
    <th colspan="2" rowspan="2">&nbsp;</th>
</tr>
<tr>
    <th class="header">Shows</th>
    <th class="header">Clicks</th>
    <th class="header">CTR</th>
    <th class="header">CPC</th>
    <th class="header">CPM</th>
    <th class="header">Shows</th>
    <th class="header">CTR</th>
    <th class="header">CPM</th>
    <th class="header">Shows</th>
    <th class="header">Clicks</th>
    <th class="header">CTR</th>
</tr>
</thead>

<tbody><td>0</td><td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tbody></table>


</body>
</html>

Вау) Слушай, круто) я сперва начал формировать циклом массив, потом плюнул и номер th стал прописывать в data :haha:

А зачем нужен hoverDiv?

Цитата:

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

А зачем нужен hoverDiv?

остатки кода по ссылке во 2 посте (убрал)