2017-08-15 6 views
0

私はdojoの完全な初心者であり、単にウェブサイト上のチュートリアルに従っています。今は、ボタンを押したときにテーブルの背景色を動的に変更しようとしています。ここに私のHTMLコードがあります:Dojo Toolkit - ボタンを使用して表の列の色を変更するにはどうすればよいですか?

<!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ファイルです。ボタンをクリックすると機能が動作しないようです。私はコメントアウトコードを使用すると、それはあなたがそう

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

はあなたのために働く必要があるノード上のスタイルを適用する必要が

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

正常に動作します。また、他の方法は、CSSクラスを変更することです。あなたが望むことをし、ボタンのonClickにそれを適用したいcssクラスを持っているとしましょう。あなたは

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

ような何かを行うことができますまた、あなたの行のスタイルROイベントをonStyleRow使用することができます

関連する問題