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;
}

現在行っていることは、表示されている結果に対して、すべての結果を 1 つの TD に追加しているため、いくつかの問題が発生しています。

  • 最初の問題は、現在の行を次の行から分離するための背景色を作成できないことです。
  • 2番目の問題は、結果全体を保持する1つの行であるため、結果の各行の下に二重枠を配置できないことです。

では、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、奇数trs に与えます (jsFiddle の変更を確認することをお勧めします)。

 $('.displayresult tbody tr:odd').css('background-color','#EEE');
于 2013-05-07T20:33:07.137 に答える
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 に答える