jquery - 使用 CSS/jQuery 在多个 TD 中添加底部边框

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