Форум

alexandr2006 · #1 (**permalink**) 05.03.2015, 13:29

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

рони · #2 (**permalink**) 05.03.2015, 13:53

alexandr2006,
всё что вам нужно в строках 9 - 15 тут Подсветка столбцов таблицы

alexandr2006 · #3 (**permalink**) 05.03.2015, 14:04

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

alexandr2006,
всё что вам нужно в строках 9 - 15 тут Подсветка столбцов таблицы

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

рони · #4 (**permalink**) 05.03.2015, 14:17

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

alexandr2006 · #5 (**permalink**) 05.03.2015, 14:49

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

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

рони · #6 (**permalink**) 05.03.2015, 15:47

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>

alexandr2006 · #7 (**permalink**) 05.03.2015, 16:33

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

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

рони · #8 (**permalink**) 05.03.2015, 16:41

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

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

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

Форум

Справочник

Discord чат

Курсы javascript