Альтернативный цвет фона для строк

Я работаю над дополнительным цветом фона и сталкиваюсь с некоторыми проблемами. Я хочу установить альтернативный цвет фона только для строк ODD с помощью CSS или JavaScript/jQuery. В скрипке я намеренно скрывал строки EVEN, потому что это требование одно и то же. Я пытался добиться этого с помощью jQuery, но не смог продолжить. И, пожалуйста, ребята, не предлагайте мне заменить TABLE на DIV. К сожалению, я работаю над старой разметкой (веб-сайт Интранета). Помощь/руководство будут оценены для существующей разметки HTML.Альтернативный цвет фона для строк

if($('table tr').hasClass('odd')){ 
     $(this).find('td :first-child').css('background','yellow'); 
    }

EDIT

Для всех синих фонов .. Я хочу изменить эти цвета фона в качестве альтернативного либо четным или нечетным? Думаю, теперь ясно?

New JSFiddle

источник

2013-09-11 Anonymous

Как вы можете видеть различные ответы, Ваш вопрос неоднозначен ... если мое предположение, что вы хотите правильно, а классы «odd» и «even» действительно чередуются так же аккуратно, как в вашем примере, вы можете использовать «nth-of-type (4n + 1)». См. [Обновленная скрипка] (http://jsfiddle.net/5dgJ3/4/). –

Благодарим вас за решение. однако для четных строк - отображение установлено на none, и это происходит динамически, я не могу это контролировать. Я отредактировал это требование. –

Мне все еще трудно понять, чего вы пытаетесь достичь. Ваш css делает tr.odd синий и tr.even красный и скрытый. Что вы пытаетесь сделать желтым? H2? И что еще вы пытаетесь сделать? – Peter

вы не должны использовать сценарий для этого.

взгляд на CSS even/odd rule.

вы можете назначить цвет фона для всех четных/нечетных tr.

Working Fiddle

просто добавить к вашей CSS, и потерять Script.

tr.odd tr:nth-child(even) /*or [odd] if you need*/ 
{ 
    background-color:yellow; 
}

также изменить backgroundbackground-color правила, если вы только собираетесь использовать цвет.

Update:

из ваших комментариев, я понял, что вы хотите только нечетные таблицы нечетного класса должны быть выбраны. (Это было очень неясно, от вопроса)

так: посмотреть Updated Fiddle

tr.odd:nth-child(4n+1) 
{ 
    background-color: yellow; 
}

источник

2013-09-11 14:32:53 avrahamcool

Я знаю это уже, что вы предлагаете. Буду признателен, если вам понравится мое требование .. спасибо. –

Я выложил для вас скрипку. – avrahamcool

В основном это требование для ODD td - я хочу изменить цвет фона (даже) фона вместе с содержимым (таблицей), которое входит в TD –

Если нечетные строки таблицы имеют класс «нечетным» уже тогда вы можете просто применить обычный CSS к классу «нечетным» ,

Если вам нужно изменить цвет фона первого столбца в нечетных строках, вы, вероятно, захотите использовать td:first-of-type вместо первого ребенка.

источник

2013-09-11 14:34:29 David

Как о чем-то вроде этого:

$('table tr:visible:odd').css('background','yellow');

jsFiddle

В случае четных строк видимость не изменяется, ': видимый' селектор является излишним.

источник

2013-09-11 14:37:06 Tomzan

Вы можете использовать object:nth-child(even) (или нечетные) для этого.

http://jsfiddle.net/5dgJ3/3/

источник

2013-09-11 14:40:00 Jacques

я только что сделал что-то похожее на это, но я использовал класс, чтобы добавить «нечетные» стили к нему.

$(function() { 
    $("table tr:odd").addClass("odd"); 
});

Может быть немного проще, если вы хотите добавить больше стилей, чем цвет BG.

источник

2013-09-11 14:42:17 Travis

Я думаю, что, наконец, понимаю. Вы хотите, чтобы каждый другой tr.odd имел другой цвет фона. Вот как это сделать с JQuery (если вам необходимо поддерживать старые версии IE):

$('tr.odd:even').css('background','yellow');

источник

2013-09-11 14:43:12 Peter

В основном это требование для ODD td. Я хочу, чтобы дополнительный цвет фона был изменен вместе с содержимым (таблицей), которое входит в TD –

Я бы, вероятно, оставит от «нечетный» класс, поскольку это служит ограниченное смысловое значение и просто JQuery применить класс то css сделать стиль.

Вариант 1

JQuery:

$('tr:nth-child(odd)').addClass('odd');

УС:

.odd { 
    background-color:#f7f7f7; 
}

Пример:

http://jsfiddle.net/gyrostu/eY2WQ

Вариант 2

Чистый CSS:

tr:nth-child(even) {background: #CCC} 
tr:nth-child(odd) {background: #FFF}

W3C Web Style Sheets CSS tips & tricks

источник

2013-09-11 15:03:12 Ken

$(document).ready(function() { 
     $("tr:odd", "#adminMessageId").css("background-color", "SkyBlue"); 

     $("input").focus(function() { 
      $(this).css("background-color", "#cccccc"); 
     }); 
     $("input").blur(function() { 
      $(this).css("background-color", "#ffffff"); 
     });

источник

2017-09-14 06:40:37 javacode1990

Альтернативный цвет фона для строк

ответ

Смежные вопросы