Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Подсветка строки таблицы с условием (https://javascript.ru/forum/jquery/40825-podsvetka-stroki-tablicy-s-usloviem.html)

ddale 21.08.2013 12:28

Подсветка строки таблицы с условием
 
Привет, товарищ! Прошу твоей помощи, потому что сам бьюсь и ничего не могу придумать.

Есть таблица:
<table>
    <tr>
        <td>
            <form action="">
                <input type="checkbox" id="" value="">
            </form>
        </td>
        <td>13.08.2013</td>
        <td>example@email.com</td>
        <td>Иван Иванов</td>
        <td><a href="#">13</a></td>
        <td><a href="#">0</a></td>
        <td>
            <a class="btn btn-primary btn-success" href="#" ><i class="icon-zoom-in "></i></a>
            <a class="btn btn-primary btn-danger btn-setting preliminary_delete_button" href="#><i class="icon-trash"></i></a>
        </td>                                 
    </tr>
</table>


Стоит задача. Подсветить строку таблицы при нажатии на эту строку (на любую её область, кроме гиперссылок и кнопок (.btn)).

Как я только не пытался. И filter() и not(). И извращения были даже..
Код показывать не буду, потому что там ровным счетом ничего нет.

Как же быть?

рони 21.08.2013 13:33

ddale,
кавычки в 15 строке :nono:
:write:
Вариант ...
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .red{
    background-color: #FF8C00;
  }

  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script>
   $(function()
     {
       $('tr').click(function(event)
         {
           $(event.target).parents('a').size() || $(event.target).not('a').size() && $(this).toggleClass('red')
         }
       );
     }
   )
  </script>
</head>

<body>
<table>
    <tr>
        <td>
            <form action="">
                <input type="checkbox" id="" value="">
            </form>
        </td>
        <td>13.08.2013</td>
        <td>example@email.com</td>
        <td>Иван Иванов</td>
        <td><a href="#">13</a></td>
        <td><a href="#">0</a></td>
        <td>
            <a class="btn btn-primary btn-success" href="#" ><i class="icon-zoom-in ">1</i></a>
            <a class="btn btn-primary btn-danger btn-setting preliminary_delete_button" href="#"><i class="icon-trash">2</i></a>
        </td>
    </tr>
</table>

</script>
</body>

</html>

ddale 21.08.2013 13:53

рони,
"кавычки в 15 строке" - это я когда красоту наводил для поста верно потерял одну. Простите.

Большое вам спасибо! Решение отлично. Простое, емкое, рабочее.


Часовой пояс GMT +3, время: 17:35.