我正在为表格行着色问题而苦苦挣扎。我正在寻求一些指导：
简而言之，我可以使用 JS 为表创建行；我正在使用 JS，因为我不提前知道我需要多少行。我想根据数据内容为某些行着色。我以这种方式使用嵌入式 CSS：
// CSS:
.newRow{
color: #dd0000;
background-color:#ffd700;
}
// JS:
// create a row in the body of the table
row=document.createElement('tr');
if(resp.items[i].mimeType.indexOf("folder") !== -1){
row.className = "newRow";
}
我在 FF 和 IE 中得到的是文本是红色的，但行背景仍然是白色的。
有人可以提供有关我要偏离轨道的地方的见解吗？
---编辑添加所有代码---
谢谢大家的回复。我在这里粘贴了我的代码，但是我不得不隐藏在 Oauth2 身份验证中使用的几个令牌，所以我还没有弄清楚如何让 jsfiddle 运行（正在处理它）。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
table.gridTable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridTable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridTable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
.newRow
{
color: #dd0000;
background-color:#ffd700;
}
</style>
</head>
<body>
<!--Add a button for the user to click to initiate auth sequence -->
<button id="authorize-button" style="visibility: hidden">Authorize</button>
<script type="text/javascript">
var clientId = '<obscured on purpose>';
var apiKey = '<obscured on purpose>';
// To enter one or more authentication scopes, refer to the documentation for the API.
var scopes = 'https://www.googleapis.com/auth/drive';
// Use a button to handle authentication the first time.
function handleClientLoad() {
gapi.client.setApiKey(apiKey);
window.setTimeout(checkAuth,1);
}
function checkAuth() {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult);
}
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('authorize-button');
if (authResult && !authResult.error) {
authorizeButton.style.visibility = 'hidden';
makeApiCall();
} else {
authorizeButton.style.visibility = '';
authorizeButton.onclick = handleAuthClick;
}
}
function handleAuthClick(event) {
gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
return false;
}
function makeTable(foo){
alert("Length: " + foo.items.length);
}
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
gapi.client.load('drive', 'v2', function() {
var request = gapi.client.drive.files.list ();
request.execute(function(resp) {
//
// number of files
document.getElementById('numFiles').innerHTML='Number of files ' + resp.items.length;
//
// create a table
var root=document.getElementById('myTable');
var tbl = document.createElement('table');
tbl.className='gridTable';
//makeTable(resp);
//
// why do I have to do this?
tbl.setAttribute("id", "table1");
//
// todo: create a table header
var thead = document.createElement('thead');
tbl.appendChild(thead);
var orderArrayHeader = ["Title","Date","Mod by","ID","Mime type","File size","Kind"];
for(var i=0;i<orderArrayHeader.length;i++){
thead.appendChild(document.createElement("th")).
appendChild(document.createTextNode(orderArrayHeader[i]));
}
//
// create table body
var tbo=document.createElement('tbody');
var row, cell;
//
// actually make the table
for(var i=0;i<resp.items.length;i++){
//
// create a row in the body of the table
row=document.createElement('tr');
if(resp.items[i].mimeType.indexOf("folder") !== -1){
row.className = "newRow";
}
//
// create columns for this row
cell=document.createElement('td');
cell.appendChild(document.createTextNode(resp.items[i].title));
row.appendChild(cell);
cell=document.createElement('td');
cell.appendChild(document.createTextNode(resp.items[i].modifiedDate));
row.appendChild(cell);
cell=document.createElement('td');
cell.appendChild(document.createTextNode(resp.items[i].lastModifyingUserName));
row.appendChild(cell);
cell=document.createElement('td');
cell.appendChild(document.createTextNode(resp.items[i].id));
row.appendChild(cell);
cell=document.createElement('td');
cell.appendChild(document.createTextNode(resp.items[i].mimeType));
row.appendChild(cell);
cell=document.createElement('td');
cell.appendChild(document.createTextNode(resp.items[i].fileSize));
row.appendChild(cell);
cell=document.createElement('td');
cell.appendChild(document.createTextNode(resp.items[i].kind));
row.appendChild(cell);
tbo.appendChild(row);
}
//
// now that all the rows have been created, add them to the table body
tbl.appendChild(tbo);
//
// insert the table into the div with ID 'myTable'
root.appendChild(tbl);
//
// fooling around with table elements
trows = document.getElementById("table1").rows;
// alert(trows.length);
row0 = trows[0];
// alert(row0.cells.length);
// myCells = row0.cells;
// myCells[0].value = "WTF?";
//
// list of files
/* for (i=0; i<resp.items.length; i++) {
//
// assign values
var titulo = resp.items[i].title;
var fechaUpd = resp.items[i].modifiedDate;
var userUpd = resp.items[i].lastModifyingUserName;
var fileID = resp.items[i].id;
//
// create a list
var fileInfo = document.createElement('li');
fileInfo.appendChild(document.createTextNode('TITLE: ' + titulo + ' FILE ID: ' + fileID + ' - LAST MODIF: ' + fechaUpd + ' - BY: ' + userUpd));
document.getElementById('content').appendChild(fileInfo);
}
*/ });
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=handleClientLoad"></script>
<p id="numFiles"></p>
<div id="content"></div>
<div id="myTable"></div>
</body>
</html>
嗨，我试图支持 Akhil 的回答......即使我还没有解决问题，它也有助于获得更多知识。但我需要有 15 个我尚未获得的声望点。所以我要感谢所有插话的人。顺便说一句，Chrome 中的行为相同。