1
我在表格行着色問題上掙扎了一下。我正在尋求一些指導：着色動態創建的表格行
簡而言之，我可以使用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>
嗨，我試着upvote Akhil的答案......這是有益的獲得更多的知識，即使我還沒有解決問題呢。但我需要有15個我尚未獲得的聲望點。所以我想要感謝所有提到的人。順便說一句，在Chrome中同樣的行爲。
原則上這應該工作。請發佈完整的HTML和相關的樣式/腳本，以便我們可以調試，其他地方可能存在錯誤。 –
或者最好創建一個http://jsfiddle.net的例子，顯示它出錯了。 –
看起來不錯，你可以使用螢火蟲來查看背景色屬性是否存在。如果有的話，爲什麼它被覆蓋。 –