2017-03-07 1 views
0

기능 :조건 확인에 .CSS() 방법을 설정할 수 없음

테이블의 데이터의 나머지가 있어야하면서 테이블 데이터의 첫 번째 행은 글자 색 백색이어야 글꼴 색상은 오렌지색입니다.

문제 :이 시점에서

, 데이터의 전체 행이 오렌지에, 데이터의 나머지가 될 동안 주황색으로 데이터의 첫 번째 행을 설정 할 수 없습니다 흰색. 이슈가 뭐야? 도와주세요.

var data = "A,4.0,00:[email protected],5.0,00:[email protected],9.0,00:09"; 
 
var playerList = data.split("@"); 
 

 
var innerList; 
 
for (i = 0; i < playerList.length; i++) { 
 
    var [name, , score] = playerList[i].split(","); 
 
    var [minute, second] = score.split(":"); 
 

 
    $("#Player_Name") 
 
    .html(function(index, html) { 
 
     var prop = index === 0 ? name : score; 
 
     return html + prop + "<br>" 
 
    }) 
 

 
    $("#Player_Minute_Score, #Player_Second_Score").html(function(index, html) { 
 

 
    var prop = index == 0 ? minute : second; 
 

 
    return html + prop + "<p>" 
 
    }) 
 
}
#Rugby_Scoreboard { 
 
    position: absolute; 
 
    left: 335px; 
 
    top: 182px; 
 
    width: 825px; 
 
    height: 818px; 
 
    border-collapse: collapse; 
 
} 
 

 
#Rugby_Scoreboard div { 
 
    z-index: 50; 
 
    position: absolute; 
 
    top: 10px; 
 
    font-size: 40px; 
 
    font-family: 'OpenSans-Bold'; 
 
    width: 1080px; 
 
    color: #ff8c04; 
 
} 
 

 
#Rugby_Scoreboard div font { 
 
    display: block; 
 
} 
 

 
#Rugby_Scoreboard div font:first-child { 
 
    color: white; 
 
} 
 

 
#Player_Name { 
 
    left: 120px; 
 
} 
 

 
#Player_Minute_Score { 
 
    left: 580px; 
 
} 
 

 
#Player_Second_Score { 
 
    left: 700px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="Game_LeaderBoard" style="position:absolute; z-index:6; top:0px; left:0px; width: 1920px; heigth: 1000px; margin:auto;"> 
 

 
    <table id="Rugby_Scoreboard"> 
 
    <tr> 
 
     <td> 
 
     <div id="Player_Name"> 
 
      <font face="OpenSans-Bold"></font> 
 
     </div> 
 
     </td> 
 

 
     <td> 
 
     <div id="Player_Minute_Score"> 
 
      <font face="OpenSans-Bold"></font> 
 
     </div> 
 
     </td> 
 

 
     <td> 
 
     <div id="Player_Second_Score"> 
 
      <font face="OpenSans-Bold"></font> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
</div>

+1

'var [name,, score]'두 개의 쉼표가 있습니다. 오타입니까? – Jai

+0

@Jai 아니요, 배열의 중간 데이터에 배열 변수를 할당하지 않으려 고합니다. – Luke

+0

문제를 재현 할 수있는 충분한 코드를 제공해 주시겠습니까? 여기에 정의되지 않은 변수 (데이터)가 있고 jQuery를 사용하고있는 것으로 추측하고 있지만 확신 할 수는 없습니다. – TylerH

답변

0

당신은 #Player_Second_Score에 색인을받지 않도록 당신이이 .html JQuery와 함수를 호출 할 때 ID 선택기가 행방 불명입니다 # 누락 그것은 == 0 그래서 함수 .CSS 결코 호출되지 않습니다

하지만 왜 jquery를 사용하고 있습니까? 당신은 :first-child 또는 :nth-child(odd, even, or child number)

[minute, seconod] 걱정에 초처럼 고정해야 다른 오타를 가지고 우리

+0

나는 css pseudo-element를 사용하고있는 부분을 정말로 이해하지 못한다. 어쨌든 오타가 있었지만 여전히 원하는 CSS를 얻을 수 없습니다 – Luke

+0

@TylerH 아무 것도 추가하지 않았습니다 – Luke

+0

@ 루케 죄송합니다. 너무 빨리 입력하십시오 : https://jsfiddle.net/spvu8uog/2/ 특히 19 번 줄 CSS 섹션 – TylerH

0

추가) 모두에 일어나는 CSS 의사 요소를 사용할 수 있습니다; atthe end after} 전체 코드를 벽돌로 만들 것입니다. 그리고 n 번째 자식 작동 방법은 다음과 같습니다 첫 번째 자식의 텍스트 색을 모두 첫 번째 tr에있는 흰색의 텍스트 색으로 만듭니다. 첫 번째 자식을 사용할 수도 있습니다.

어떤 이유로 그것이 설명에 응답 할 수 없었습니다.

+0

을 업데이트했습니다. 다른 표 태그의 다른 태그도 동일한 속성을 따르지 않습니까? – Luke

+0

네,하지만 u는 수업을 편집하고 그 수업의 tr을 편집하고 싶은 표를 줄 수 있습니다. –

관련 문제