使用JQuery / CSS添加底部边框和BG颜色 [英] Add bottom border and BG color using JQuery/CSS

问题描述

我的JS小提琴：

这是你的结构变化：

  var recs ='' 
 if（$（'。dSpecialty'）。is（'：enabled'））{
 for（test = 0; test< = phyList.length  -  1; test ++）{
i = phyList [test] .specialty; //获取数组中的所有专业
 
 for（var iVar = 0; iVar  if（i [iVar] == dSpecialtyVal）{// $（。dSpecialty）。find（'option：selected'）。attr（'id'））{//如果phyList数组中有什么符合选择
 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 to odd tr s（更好地看到jsFiddle中的更改）：

  $（'displayresult tbody tr：odd'）css（'background-color'，'＃EEE'）; 
  




My JS Fiddle: http://jsfiddle.net/kvHq7/

I won't put the script on this page as it is very extensive and will take up too much space. Please visit the JSFiddle link I posted above.

Only will add the CSS code:

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

What It is currently doing is, for the result that is being displayed, it's adding all the result into one TD which is causing me to run into some issues.

• The first issue is, I can't make the background color to separate the current row from the next and so forth.
• Second issue is, I cannot put a double border under each row of result as it's one row holding the entire result.

So how do I either edit the JS code and/or the CSS code to have the following result:

As you can see the every result has the double bottom border and also, alternate TD BG is gray.

解决方案

I've changed your code and remove some part of it that related to the radiobox and jumpbox selection, to make the code clear.

So, you can add that parts to your code by yourself later.

Here is your working code: jsFiddle Live Demo
Here is your structure change:

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

        }

and add this line to give background-color to odd trs (better to see changes in jsFiddle):

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

这篇关于使用JQuery / CSS添加底部边框和BG颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！