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>

嗨,我试图支持 Akhil 的回答......即使我还没有解决问题,它也有助于获得更多知识。但我需要有 15 个我尚未获得的声望点。所以我要感谢所有插话的人。顺便说一句,Chrome 中的行为相同。

4

1 回答 1

0

如果您没有创建 td 标签,您可能会遇到这种情况。

确保您创建了适当的 td 标签并将其添加到您的 tr 元素中。

var row=document.createElement('tr');
var td =document.createElement('td');
td.innerHTML="aaa";
row.appendChild(td);
于 2012-11-29T11:55:25.480 回答