2017-08-15 21 views
0

我是一個完整的初學者dojo,只是簡單地遵循網站上的教程。現在我試圖在按下按鈕時動態更改表格的背景顏色。這裏是我的html代碼:Dojo工具包 - 如何使用按鈕更改表格列的顏色?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 

     <link rel="stylesheet" href="dijit/themes/claro/claro.css"> 
     <!-- load Dojo --> 
     <script>dojoConfig = {parseOnLoad: true}</script> 
     <script src="dojo/dojo.js" data-dojo-config="async: true"></script> 
     <script> require(['myModule.js']); </script> 

     <title>table</title> 

    </head> 

    <body class="claro"> 
     <h1 id="greeting">test table</h1> 

    <table data-dojo-type="dojox.grid.DataGrid" id="tableContainer"> 
     <thead> 
      <tr> 
       <th field="col1">Company</th> 
       <th field="col2">Contact</th> 
       <th field="col3">Country</th> 
      </tr> 
      <tr> 
       <td>Alfreds Futterkiste</td> 
       <td>Maria Anders</td> 
       <td>Germany</td> 
      </tr> 
     </thead> 
    </table> 

    <button id="progButtonNode" type="button"></button> 
    <div id="result1"></div> 
    </body> 
</html> 

這是myModule.js文件。當我點擊按鈕時,該功能似乎不起作用。當我使用註釋掉的代碼,它工作正常

require(["dijit/form/Button", "dojo/dom", "dojo", "dojo/domReady!"], function(Button, dom){ 
    // Create a button programmatically: 
    var myButton = new Button({ 
     label: "Click me!", 
     onClick: function(dojo){ 
      //dom.byId("result1").innerHTML += "Thank you! "; 
      dojo.style("tableContainer", "background-color", "red"); 
     } 
    }, "progButtonNode").startup(); 
}); 

回答

0

需要應用節點上的樣式,以便

dojo.style(dom.byId("tableContainer"), "background-color", "red"); 

應該爲你工作。另外一種方法是更改​​css類。比方說,你有一個css類,它可以做你想做的事,並且你想要將它應用到一個按鈕上。你可以這樣做

dijit.byId('yourgid').set('class','yourcssclass'); 

您還可以使用onStyleRow事件RO風格的行