Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.04.2019, 10:30
Интересующийся
Отправить личное сообщение для Greider Посмотреть профиль Найти все сообщения от Greider
 
Регистрация: 30.09.2010
Сообщений: 20

Подсветка одинаковых элементов в таблице
Всем привет!

Нужно сделать подсветку и выделение по клику одинаковых строк в таблице.

Нашел пример, который прям то, что мне надо: http://jsfiddle.net/HEmM4/

Внедрил в таблицу - не работает. Попробовал на чистом файле просто воспроизвести этот пример - не получается. JQuery работает, тест проходит.

Что я делаю не так? Вот мой файл. Вроде все то же самое на фидле рабоает, а у меня нет.... хостинг мастерхост.
[spoiler]
<html>
<body>
<head>


<style type="text/css">
.clicked, .hovered {
    font-weight: bold;
}
.gr {
    cursor: pointer;
}
</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script>
$(".gr").mouseover(function(){
    var group = $(this).data('group');
    $('.'+group).addClass('hovered');
});
$(".gr").mouseleave(function(){
    var group = $(this).data('group');
    $('.'+group).removeClass('hovered');
})
$(".gr").click(function(){
    var group = $(this).data('group');
    if($(this).hasClass('clicked')){
        $('.'+group).removeClass('clicked');
    }else{
        $('.'+group).addClass('clicked');
    }
})
</script>

<!-- Проверка работы jQuery -->
<script type="text/javascript">
$(document).ready(function(){
    $('body').append('<br/>This text append by jQuery');
});
</script>

</head>

<div style="overflow: hidden;">
  <div style="float: left">
    <div class="gr group1" data-group="group1">group1</div>
    <div class="gr group2" data-group="group2">group2</div>
    <div class="gr group1" data-group="group1">group1</div>
    <div class="gr group2" data-group="group2">group2</div>
    <div class="gr group3" data-group="group3">group3</div>
    <div class="gr group1" data-group="group1">group1</div>
    <div class="gr group3" data-group="group3">group3</div>
    <div class="gr group2" data-group="group2">group2</div>
  </div>
</div>


</body>
</html>
[/spoiler]

Последний раз редактировалось Greider, 03.04.2019 в 10:33.
Ответить с цитированием
  #2 (permalink)  
Старый 03.04.2019, 12:49
Интересующийся
Отправить личное сообщение для username Посмотреть профиль Найти все сообщения от username
 
Регистрация: 21.03.2019
Сообщений: 18

код из второго тега <script можно переместить внутрь функции $(document).ready(function(){
Ответить с цитированием
  #3 (permalink)  
Старый 03.04.2019, 12:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Greider,
строки 18 - 33 перенесите в начало строки 40
Ответить с цитированием
  #4 (permalink)  
Старый 03.04.2019, 13:04
Интересующийся
Отправить личное сообщение для Greider Посмотреть профиль Найти все сообщения от Greider
 
Регистрация: 30.09.2010
Сообщений: 20

Спасибо огромное! Так заработало!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Значения элементов поля "id" в таблице MySQL garrip91 Серверные языки и технологии 5 03.12.2018 07:27
Подсчет одинаковых элементов в массиве Mayder Общие вопросы Javascript 4 13.11.2016 22:35
Создать несколько одинаковых элементов dulingleb Общие вопросы Javascript 3 29.06.2014 21:17
Подсветка одинаковых элементов в таблице Graf737 (X)HTML/CSS 4 17.04.2014 04:47
Сгенерировать 2 последовательности и узнать сколько в них одинаковых элементов Ирина Владимировна Общие вопросы Javascript 10 24.03.2012 18:18