Как я могу чередовать цвета строк таблицы в asp.net mvc, используя jquery? - PullRequest
Новая
       10

Как я могу чередовать цвета строк таблицы в asp.net mvc, используя jquery?

4 голосов
/ 19 марта 2009

Возможно, глупый вопрос, но я новичок в MVC и jQuery. Я хочу чередовать цвета строк моих таблиц, и я решил, что для этого буду использовать jQuery. Я знаю, что могу написать метод расширения (http://haacked.com/archive/2008/08/07/aspnetmvc_cycle.aspx), и т. Д., Но после прочтения комментария SH к статье на http://haacked.com/archive/2008/05/03/code-based-repeater-for-asp.net-mvc.aspx я выбрал jQuery в качестве решения, которое я хочу реализовать.

Я хочу реализовать метод, описанный в http://www.packtpub.com/article/jquery-table-manipulation-part2, но я не выяснил, куда поместить начальный вызов jQuery (например: $ (document) .ready (function () {...}) ;

Как я уже сказал, я новичок в jQuery ...

Ответы [ 3 ]

19 голосов
/ 19 марта 2009

Это можно сделать, установив класс для всех четных строк таблицы. 

<html>
    <head>
        <title>Example Title</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('tr:even').addClass('alt-row-class');
            });
        </script>
    </head>
    <body>...</body>
</html>

Затем примените стиль к этому классу, используя стандартную CSS: 

.alt-row-class { background-color: green; }

Комментатор правильно указывает, что вы можете поэкспериментировать с селектором (tr:even), чтобы получить желаемые результаты относительно элементов tbody, thead и tfoot.

11 голосов
/ 19 марта 2009

Имейте в виду, что если вы используете jQuery и у пользователя отключен javascript, ваш пользовательский интерфейс не будет оформлен так, как вы хотите. Вы можете рассмотреть возможность назначения CSS-классов для стилизации в самом коде представления. 

   @{ var alternating = false;
      foreach (var row in Model) {
          <tr class='@(alternating ? "alternating-row" : "normal-row")'>
          ...
          alternating = !alternating;
   }
1 голос
/ 19 марта 2009

Если вы используете плагин jQuery Tablesorter , у него есть встроенный «виджет» для этого так называемого «зебра» (среди всех его других функций).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...