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 に答える