使用JQuery/CSS添加底部边框和背景颜色

Question

我的JS Fiddle：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是灰色。

- Si8

---

因为我已经将其他代码注释掉了，这里是更新后的代码链接：http://jsfiddle.net/KedsY/1/ - Si8

附注：您可以将这两个属性组合在一起。border-bottom: 4px double; - Aaron

旨在对行进行样式设置，而不是列。 - JimmyRare

@JimmyRare 唯一的问题是根据 JQuery 的方式，它将添加总值并将其显示在一行中，因此除非我通过 JQuery 添加每一行，否则这将不可能。 - Si8

你是在用 <br> 分隔记录吗！！？？ 在这种编码结构中，你不能这样做。 - Siamak Motlagh

我认为问题就出在这里。我很可能需要使用JQuery为每个记录创建新的<tr><td></td><td></td><td></td><td></td><td></td></tr>。有什么建议吗？ - Si8

Answer 1

如果你能将结果放入不同的行中（而不是将所有结果都包含在同一个<tr>元素中），你可以使用以下CSS来应用交替颜色行，并且可以扩展它以包括border-bottom属性。

.displayresult tr:nth-child(even) {
  background: #ececec
}
.displayresult td{
  border-width: 4px;
  border-bottom-style: double;
}

- adamdehaven

---

尝试过了，但只有一行数据，且数据被合并添加到每个列中，这导致了问题。 - Si8

Answer 2

我已经修改了您的代码并删除了与单选框和跳转框选择相关的部分，以使代码更清晰。因此，您可以稍后自行添加这些部分到您的代码中。

这是您的有效代码：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 += "<tr><td>";
                    recs += phyList[test].firstName + "</td><td>";
                    recs += phyList[test].lastName + "</td><td>";
                    recs += phyList[test].specialty + "</td><td>";
                    recs += phyList[test].address + "</td><td>";
                    recs += phyList[test].phone + "</td>";
                    recs += '</r>';
                    $('.displayresult tbody').html(recs);
                    document.getElementById('errorsp').innerHTML = "<i>Match found</i>";
                    }
                }

                if (i == dSpecialtyVal)
                { 
                    recs += "<tr><td>";
                    recs += phyList[test].firstName + "</td><td>";
                    recs += phyList[test].lastName + "</td><td>";
                    recs += phyList[test].specialty + "</td><td>";
                    recs += phyList[test].address + "</td><td>";
                    recs += phyList[test].phone + "</td>";
                    recs += '</r>';
                    $('.displayresult tbody').html(recs);
                    document.getElementById('errorsp').innerHTML = "<i>Match found</i>";
                }
                $("#splabel").css('font-weight', 'bold');
                $("#fname").css('font-weight', 'normal');
                $("#lname").css('font-weight', 'normal');
            }

        }

并添加这行代码，使奇数行的 tr 具有 background-color（在 jsFiddle 中更好地查看更改）：

 $('.displayresult tbody tr:odd').css('background-color','#EEE');

- Siamak Motlagh

---

你的代码运行如预期，太棒了！ 但有一个问题是，标题标签“名字”、“姓氏”、“专业领域”、“地址”、“电话”，我希望它们始终可见。 - Si8

@SiKni8 只需删除 .displayresult { display: none; }，这样表头就会在搜索之前可见。 - RaphaelDDL

@Siamak.A.M 我更新了代码，使得每个 TD 底部都有双线，但是它没有生效。http://jsfiddle.net/KedsY/5/ - Si8

另一个问题是，如果您选择了“红色。核医学”，它也会显示放射学包括在专业中，而之前没有这个选项 :/ - Si8

@SiKni8 jsFiddle已编辑。我写了这段代码，只是为了让你了解编码的思路，而完善它并使其完美运行则是你的工作 :) - Siamak Motlagh

Answer 3

你应该为每个搜索结果添加一行，而不是简单地将它们全部添加到一个 td 中。否则，就只能为每个“结果项”添加笨重的 css，并尝试将背景与同一行中的其他项对齐。

- RelevantUsername

---

我也在考虑同样的事情... 对于displayresult DIV，我可以使用Jquery在标题标签下添加每一行？在JQuery中最好的方法是什么？ - Si8