Javascript для выделения только строки таблицы Когда внутри тега «a» нажимается - PullRequest
Новая
       2

Javascript для выделения только строки таблицы Когда внутри тега «a» нажимается

1 голос
/ 13 января 2012

В настоящее время у меня есть HTML-таблица (с 2 столбцами), и я пытаюсь добавить к этой таблице различные эффекты, такие как эффект наведения строки таблицы, эффект щелчка таблицы и т. Д. Это сценарий, который я использую сейчас, и егопока работает нормально: 

<head>
<script type="text/javascript"> 
$(document).ready(function(){   

    //the following script is to change the table row bg color when clicked
    $('tr').click(function(){
    $('tr td').css({ 'background' : 'none'});
    $('td', this).css({ 'background-color' : '#CCC' });
  }); 

    //the following script is for the table row hover effect
    $('tr').hover(function() {
            $(this).css('background-color', '#FFFF99');
        },
        function() {
            $(this).css('background-color', '#FFFFFF');
            $(this).contents('td').css('border', 'none');
        });


});  
</script>

</head>

<body>
<table>
<tr>
<td> <a href="#">Movie Part 1</a></td>
<td>01:23:26</td>
</tr>

<tr>
<td> <a href="#">Movie Part 1</a></td>
<td>01:23:26</td>
</tr>

</table>

</body>

Из приведенного выше шаблона вы можете видеть, что у меня есть 2 столбца для этой таблицы, и 1 столбец имеет тег со ссылкой href, а другой столбец не имеет тега.

Как я уже упоминал выше, скрипт, который я использую для выделения строки таблицы при нажатии, работает.Но я пытаюсь немного изменить сценарий, чтобы он выполнял только эффект щелчка, только когда нажата метка «a» внутри «tr td».Прямо сейчас строка таблицы подсвечивается, не имеет значения, где я щелкаю внутри области 'tr'.Он также выделяется, даже если я щелкаю по второму столбцу внутри «tr», который не имеет ссылки.

Как я могу изменить этот скрипт выше, чтобы он выделял всю строку таблицы ТОЛЬКО при нажатии на тег 'a' в первом столбце строки таблицы?

Ответы [ 3 ]

0 голосов
/ 13 января 2012

Вы можете использовать это, чтобы проверить, находится ли 'a' ниже 'tr' с помощью href 

$('tr').click(function(e) {
    if (e.target.href){
        $('tr td').css({
            'background': 'none'
        });
        $('td', this).css({
            'background-color': '#CCC'
        });
    }
});

PS. Спасибо Ричарду Нилу Илагану (Richard Neil Ilagan) за то, что он поднял голову над исключением, выданным с использованием if (e.target.href.length> 0) из-за всплытия событий.

0 голосов
/ 13 января 2012

Посмотрите, работает ли это для вас:

http://jsbin.com/enariy/edit#javascript,html

0 голосов
/ 13 января 2012

jQuery 1.7.x: 

$('tr').on('click','a', function () {
    $(this).closest('tr').css({ 'background-color' : '#ccc'});
});

Я думаю, что вам нужно всего лишь изменить цвет фона TR, а не TD. Если я ошибаюсь, просто используйте это вместо: 

$('tr').on('click','a', function () {
    $(this).closest('tr').children('td').css({ 'background-color' : '#ccc'});
});

jQuery 1.6.x и ниже: 

$('tr').delegate('a', 'click', function () {
    $(this).closest('tr').children('td').css({ 'background-color' : '#ccc' });
});

EDIT

Согласно вашему комментарию ниже, вы хотите вернуть строку назад к нормальному цвету фона при нажатии на другую строку.

Чтобы сделать это эффективно, я бы посоветовал вам прибегнуть к правилам CSS. Черт возьми, если подумать, мы должны были это сделать, даже когда на вопрос был дан первый ответ.

Сначала определите правила CSS следующим образом: 

tr { background-color:#fff; /* or your default */ }
tr.selected { background-color:#ddd; /* or your selected color */ }

затем переключите это с помощью jQuery: 

$('tr').delegate('a', 'click', function () {
    $(this)
        .closest('tr').addClass('selected')
        .siblings('tr').removeClass('selected')
        ;
});

Если простое изменение tr не работает для вас, измените ваши правила CSS следующим образом: 

tr td { background-color:#fff; /* or your default */ }
tr.selected td { background-color:#ddd; /* or your selected color */ }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...