使用JQuery / CSS添加底部边框和BG颜色
我的JS小提琴 ： http ： //jsfiddle.net/kvHq7/
我不会把脚本放在这个页面上，因为它非常广泛并且会占用太多空间。 请访问我上面发布的JSFiddle链接。
只会添加CSS代码：
.displayresult { display: none; } #fname, #lname, #splabel, #addlabel, #pnlabel { border-width: 4px; border-bottom-style: double; } #first, #last, #specialty, #address, #phone { border-width: 4px; border-bottom-style: double; } 它目前正在做的是，对于正在显示的结果，它将所有结果添加到一个TD中，这导致我遇到一些问题。
- 第一个问题是，我不能使背景颜色将当前行与下一行分开，依此类推。
- 第二个问题是，我不能在每行结果下放置一个双边框，因为它是一行保存整个结果。
那么我如何编辑JS代码和/或CSS代码以获得以下结果： 
正如您所看到的，每个结果都有双底边框，而且备用TD BG是灰色的。
我已经更改了你的代码并删除了与radiobox和jumpbox选择相关的部分代码，以使代码清晰。
因此，您可以稍后自己将这些部分添加到代码中。
这是你的工作代码： jsFiddle Live Demo
这是你的结构变化：
var recs =''; if ($('.dSpecialty').is(':enabled')) { for (test = 0; test <= phyList.length - 1; test++) { i = phyList[test].specialty; //get all specialty in the array for (var iVar = 0; iVar < i.length; iVar++) { if (i[iVar] == dSpecialtyVal) { //$(".dSpecialty").find('option:selected').attr('id')) { //if what's in the phyList array matches selection recs += ""; recs += phyList[test].firstName + " "; recs += phyList[test].lastName + " "; recs += phyList[test].specialty + " "; recs += phyList[test].address + " "; recs += phyList[test].phone + " "; recs += ''; $('.displayresult tbody').html(recs); document.getElementById('errorsp').innerHTML = "Match found"; } } if (i == dSpecialtyVal) { recs += ""; recs += phyList[test].firstName + " "; recs += phyList[test].lastName + " "; recs += phyList[test].specialty + " "; recs += phyList[test].address + " "; recs += phyList[test].phone + " "; recs += ''; $('.displayresult tbody').html(recs); document.getElementById('errorsp').innerHTML = "Match found"; } $("#splabel").css('font-weight', 'bold'); $("#fname").css('font-weight', 'normal'); $("#lname").css('font-weight', 'normal'); } }
并添加此行以将background-color赋予奇数tr （更好地查看jsFiddle中的更改）：
$('.displayresult tbody tr:odd').css('background-color','#EEE');
您应该为每个搜索结果添加一行，而不是简单地将它们全部添加到一个td中。 否则，除了为每个“结果术语”添加笨重的css之外别无选择，并尝试将背景与同一行上的其他人对齐。
如果您可以将结果放入不同的行（而不是将所有结果包含在同一个
元素中），则可以将交替的颜色行应用于以下CSS ，并且可以对其进行扩展以包括border-bottom属性。
.displayresult tr:nth-child(even) { background: #ececec } .displayresult td{ border-width: 4px; border-bottom-style: double; }