javascript - нечетное/четное разбиение таблицы - несколько таблиц на одной странице

Question

У меня есть табличный дизайн, который я использую для нескольких таблиц. Будут некоторые цветовые различия, но они определяются на основе классов. например:

<table id="table" class="table1"> and <table id="table" class="table2"> 

Я хочу применить Javascript чередованием для нечетных строк; однако, хотите, чтобы он работал на всех таблицах с идентификатором table, потому что на некоторых страницах будет несколько таблиц с одинаковым идентификатором (только разные классы).

Я смотрел на этот код,

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

Но это, кажется, работает только на первом столе и останавливается после этого. На днях я видел код, который работал; однако теперь я не могу найти его. Любые предложения по javascript-коду, которые будут работать в нескольких таблицах, получая нечетные строки из каждой таблицы отдельно и применяя класс к этим строкам?

Если я не сделал это правильно, сообщите мне, и я попытаюсь исправить. И я не использую nth-child CSS для этого, потому что nth-child CSS не работает в IE (по крайней мере, мне не удалось заставить его работать). Мне нужен этот сайт для работы даже в старых браузерах, поэтому я возвращаюсь к JS. Мне также нужно, чтобы JS работал во всех браузерах.

Answer 1

Изменить это: -

$("#table tr:odd").addClass("odd"); 

к

$("table tr:odd").addClass("odd"); 

Вы также можете попробовать это: -

$(document).ready(function() { 
    $("table").find("TR:odd").addClass("odd"); 
}); 

JS FIDDLE

В первом решении оригинальный селектор будет взять группу всех элементов т.р., содержащихся в таблице на страницы, а затем взять все остальные из этого огромного набора. Позднее сначала создается группа всех таблиц, а затем подгруппа строк в каждой таблице, а затем берется каждая другая строка из каждой подгруппы.

Answer 2

Если вы используете селектор ID #<whatever>, тогда он вернет только первый элемент, который соответствует. вы могли бы использовать $("table tr:odd") или придумать класс, чтобы назначить все ваши таблицы, которые показывают, что должно иметь альтернативные строки окраски, как $(".table-striped tr:odd")

альтернатив

этих примеры будут работать по нескольким таблицам и сохранить порядок окраски то же самое

$('.table-striped').each(function() { 
    $('tr:odd', this).addClass('odd'); 
}); 

$(".table-striped tr:nth-child(odd)").addClass("odd"); 

Answer 3

«Ну, у вас есть фундаментальный недостаток в таком подходе, в том, что id значения должны быть уникальными на странице. Таким образом, вы действительно не должны сделать id атрибут общую„вещь“на основе сценария на.

Хорошей новостью является то, что вы можете пропустить с помощью идентификатора и сделать это на основе самого тега ... $("table tr:odd").addClass("odd"); применит класс к нечетным строкам каждого элемента <table> на странице.

Answer 4

Вы получили ID и класса перепутаны

<table id="table" class="table1"> 

Должно быть

<table id="table1" class="table"> 

и

<table id="table" class="table2"> 

Должно быть

<table id="table2" class="table"> 

Ваш JS должен быть:

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

Идентификатор должен быть уникальным и применять только один раз, он используется для идентификации конкретного элемента. Отсюда и название «ID».

Класс используется для поиска нескольких элементов.