I’m struggling a bit with a table row colouring issue. I’m seeking some guidance:
Briefly, I can create rows for a table using JS; I’m using JS because I don’t know ahead of time how many rows I need. I’d like to colour certain rows based on data content. I’m using embedded CSS in this way:
// 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";
}
What I get in both FF and IE is the text is coloured red but the row background is still white.
Could someone provide insight as to where I’m going off the track?
—edited to add all the code—
Thank you all for the responses. I’ve pasted my code here, but I had to obscure a couple of tokens used in Oauth2 authentication, so I haven’t figured out how to make jsfiddle that runs (working on it).
<!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>
Hi, I tried to upvote Akhil’s answer…it was helpful in gaining more knowledge even though I haven’t solved the problem yet. But I need to have 15 reputation points which I have not yet acquired. So I wanted to thank everyone who chimed in. BTW, same behavior in Chrome.
You might get this behaviour if you didn’t create the td tags.
make sure you create the appropriate td tags and add it to your tr element.