Здравствуйте! В общем задача вроде как простая, но не могу реализовать. В общем есть таблица, которая создается динамически, в зависимости от того сколько объектов карты находится на экране. Для удобства восприятия у таблицы сделан стиль зебры. Реализовал, что при наведение на строку она меняет цвет и меняется цвет объекта на карте. Теперь делаю обратную задачу, при наведение на объект он подкрашивается и должна подкраситься соответсвующая этому объекту строка. Добавляю ему стиль при помощи класса, но в хромовском инспекторе видно, что цвет перечеркнут, если в том же инспекторе отменить цвет у tr:nth-child(2n+1), то тогда сработает. Я поначалу подумал проблема в приоритетах css
, но ведь у nth всего лишь 2, а у класса как минимум 10
. В чем проблема и как её победить?
Код ниже:
map.on('pointermove', function(evt){
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer){
return feature;
});
if(feature && flag == false){
feature2 = feature;
flag = true;
var a = $('.col1, .col2');
for(i=0; i < a.length; i = i+2){
if(a[i].innerHTML == feature2.values_.fid && a[i+1].innerHTML == feature2.values_.description){
feature2.setStyle(style_hover);
}
}
} else if ( feature && flag == true){
feature2.setStyle(style_unhover);
feature2 = feature;
var a = $('.col1, .col2');
for(i=0; i < a.length; i = i+2){
if(a[i].innerHTML == feature2.values_.fid && a[i+1].innerHTML == feature2.values_.description){
feature2.setStyle(style_hover);
a[i].parentElement.classList.add('active');
}
}
} else if (flag == true){
feature2.setStyle(style_unhover);
flag = false;
}
});
caption{
width: auto;
font-weight: bold;
background-color: #2b73d7;
color: white;
padding-top: 3px;
padding-left: 5px;
text-align: left;
height: 30px;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
position: relative;
}
tr:nth-child(2n+1){
background-color: #78A7E7;
}
tr{
display: table;
width:100%;
table-layout: fixed;
background-color: #4E8BDE;
color: white;
}
tbody tr:nth-child(n+1):hover{
background-color: #084496;
}
th{
border: 2px solid white;
}
.active{
background-color: #0E438C;
}
.cancel img{
position: absolute;
top: -10px;
right: -5px;
width: 20px;
height: 20px;
}
.cancel img:hover{
cursor: pointer;
}
#featureTable tbody{
display: block;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
}
thead{
width:100%;
border-left: 2px solid white;
border-right: 2px solid white;
}
tbody{
border-right: 2px solid white;
border-left: 2px solid white;
border-bottom: 2px solid white;
}
td{
border-bottom: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
text-align: center;
padding: 1px;
}
.col1, .col2{
width: 33.7%;
}
</style>
<body onload="init()">
<div id="menu">
<div id="logo"><img src="img/Gazprom-SpaceSystems.JPG"></div>
<ul class="menu">
<li class="nav1"><a id="DrawButton" href="#">Draw</a>
<ul class="submenu">
<li><a id="DrawPoint" href="#">Point</a></li>
<li><a id="DrawLine" href="#">Line</a></li>
<li><a id="DrawPolygon" href="#">Polygon</a></li>
</ul>
</li>
<li class="nav2"><a id="EditButton" href="#">Edit</a></li>
</ul>
</div>
<div id="map" class="map">
<table id="featureTable" class="unsick">
<caption>Table Features
<div class="cancel"><img src="img/cancel.png"></div>
</caption>
<thead>
<tr>
<th>FID</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody id="body">
</tbody>
</table>
</div>
</body>
</html>