2017-08-15 17 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风格的行