Question

我的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代码以获得以下结果： end result

正如您所看到的，每个结果都有双底边框，而且备用TD BG是灰色的。

Answer 1

您应该为每个搜索结果添加一行，而不是简单地将它们全部添加到一个td中。否则，除了为每个“结果术语”添加笨重的css之外别无选择，并尝试将背景与同一行的其他人对齐。

Answer 2

如果您可以将结果放入不同的行（而不是将所有结果包含在同一个<tr>元素中），则可以将交替颜色行应用于以下CSS，并可以将其展开为还包括border-bottom属性。

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

Answer 3

我已经更改了你的代码并删除了与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 += "<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');
            }

        }

并添加此行以将background-color提供给奇数tr s（更好地查看jsFiddle中的更改）：

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

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

3 个答案: