Добавить нижнюю границу в нескольких TD с помощью CSS/JQuery

Question

Мой сайт Ссылка: Search Page

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

.displayresult { 
    display: block; 
} 
#fname, #lname, #splabel, #addlabel, #pnlabel { 
    border-width: 4px; 
    border-bottom-style: double; 
} 
#first, #last, #specialty, #address, #phone { 
    border-width: 4px; 
    border-bottom-style: double; 
} 

Если пользователь выбирает специальность и выбирает вариант, CSS только добавляет двойную границу на последнем TD.

Как изменить CSS или JQuery Скрипт:

• Сделать так, чтобы он добавляет границу после каждого TD?

И/ИЛИ

• Сделать один TD белый и следующий TD-серый и следующий TD белый и следующий TD-серый и так далее?

У меня есть следующий Jquery, который не работает и делает то же самое, как CSS:

$("#fname").css('border-bottom-style', 'double'); 

Пожалуйста, перейдите по ссылке выше, чтобы получить демо-версию.

Answer 1

Сделать один TD белый и следующий TD-серый и следующий TD белый и следующий TD-серый и так далее

Вы можете сделать это:

td:nth-child(odd) { 
    background-color: gray; 
} 
td:nth-child(even) { 
    background-color: white; 
} 

DEMO

Answer 2

You не должен использовать один и тот же идентификатор для нескольких элементов. Идентификаторы предназначены для сингулярности, назначенной одному элементу в DOM.

Причина, по которой ваш код не работает, заключается в том, что вы ожидаете, что #fname будет функционировать как класс.

Вы должны делать <td class="fname"> вместо <td id="#fname">