CSS背景顏色未注冊
[英]CSS background color not registering
問題描述
我並不真正擔心其中的javascript部分，因為我需要自己弄清楚這一點，但是通常不適合我的事情不是。 我的td.d和td.f沒有在表格中注冊，只是顯示背景顏色（白色，但是如果我更改表格的背景顏色，它也會更改那些設置），我在通過調試器，什么都沒有出現，我嘗試過幾次修改，但是似乎沒有任何辦法使它使用那些css settigns。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<style type = "text/css">
table {width: 300px;
border-collapse: collapse;}
table, td, th { border: 1px solid black;
padding: 4px;}
th { text-align: left; color:white; background-color:red;}
td.a {
background-color: darkblue;}
td.b {
background-color: yellow;}
td.c {
background-color: orange;)
td.d {
background-color: #330000;}
td.f {
background-color: #00FF00;}
</style>
<title> Grades </title>
<script>
var grades = 0;
grades = window.prompt('Enter Scores seperated by a space');
if (grades == null || grades == "")
{
document.writeln("No graph to display");
}
if (grades != null && grades != "")
{
array = grades.split(" "); //split up the string of grades into individual numbers by seperating with a space
var lengthOfArray = array.length; // get length of array for use later in the for loop
var letterCounter = new Array( 0,0,0,0,0 ); //make new array to be able to count the numbers of A's,B's,C's...
for (var counter = 0; counter < lengthOfArray; ++counter) //implement the grade that pertains to the if statements
{
if (array[counter] >=90)
letterCounter[0]++;
else
if (array[counter] >=80)
letterCounter[1]++;
else
if (array[counter] >=70)
letterCounter[2]++;
else
if (array[counter] >=60)
letterCounter[3]++;
else
if(array[counter] <60)
letterCounter[4]++;
};
document.writeln("<table>");
document.writeln("<th>Grades</th>");
document.writeln("<tr><td class='a' colspan=letterCounter[0]></td></tr>");
document.writeln("<tr><td class='b'></td></tr>");
document.writeln("<tr><td class='c'></td></tr>");
document.writeln("<tr><td class='g'></td></tr>");
document.writeln("<tr><td class='h'></td></tr>");
document.writeln(letterCounter);
document.writeln(array);
};
</script>
</head>
</html>
2 個解決方案
解決方案1
1 2015-02-25 06:21:16
用}代替}關閉td.c的樣式
喜歡
td.c {background-color：orange;}
解決方案2
1 已采納 2015-02-25 06:21:51
在您的CSS中，您可能不小心用) （在orange;之后)關閉了一條語句，應該使用}將其關閉。 這就是其余CSS代碼無法正常工作以及表未按您期望的樣式設置的原因。
我在下面的演示中添加了帶有相關類的示例行。
工作代碼段：
var grades = 0; grades = window.prompt('Enter Scores seperated by a space'); if (grades == null || grades == "") { document.writeln("No graph to display"); } if (grades != null && grades != "") { array = grades.split(" "); //split up the string of grades into individual numbers by seperating with a space var lengthOfArray = array.length; // get length of array for use later in the for loop var letterCounter = new Array( 0,0,0,0,0 ); //make new array to be able to count the numbers of A's,B's,C's... for (var counter = 0; counter < lengthOfArray; ++counter) //implement the grade that pertains to the if statements { if (array[counter] >=90) letterCounter[0]++; else if (array[counter] >=80) letterCounter[1]++; else if (array[counter] >=70) letterCounter[2]++; else if (array[counter] >=60) letterCounter[3]++; else if(array[counter] <60) letterCounter[4]++; }; document.writeln("<table>"); document.writeln("<th>Grades</th>"); document.writeln("<tr><td class='a' colspan=letterCounter[0]></td></tr>"); document.writeln("<tr><td class='b'></td></tr>"); document.writeln("<tr><td class='c'></td></tr>"); document.writeln("<tr><td class='d'></td></tr>"); document.writeln("<tr><td class='f'></td></tr>"); document.writeln("<tr><td class='g'></td></tr>"); document.writeln("<tr><td class='h'></td></tr>"); document.writeln(letterCounter); document.writeln(array); };
table {width: 300px; border-collapse: collapse;} table, td, th { border: 1px solid black; padding: 4px;} th { text-align: left; color:white; background-color:red;} td.a { background-color: darkblue;} td.b { background-color: yellow;} td.c { background-color: orange;} /* you had ) here */ td.d { background-color: #330000;} td.f { background-color: #00FF00;}
Css反轉背景顏色
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.