3

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

4

3 回答 3

1

我已经更改了您的代码并删除了与单选框和跳转框选择相关的部分代码，以使代码清晰。

因此，您可以稍后自行将这些部分添加到您的代码中。

这是您的工作代码：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（更好地看到 jsFiddle 的变化）：

 $('.displayresult tbody tr:odd').css('background-color','#EEE');
于 2013-05-07T20:33:07.137 回答
1

您应该为获得的每个搜索结果添加一行，而不是简单地将它们全部添加到一个 td.txt 中。否则将别无选择，只能在每个“结果项”中添加笨重的 css 并尝试将背景与同一行的其他人对齐。

于 2013-05-07T19:45:18.690 回答
1

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

.displayresult tr:nth-child(even) {
  background: #ececec
}
.displayresult td{
  border-width: 4px;
  border-bottom-style: double;
}
于 2013-05-07T19:48:25.043 回答