Dojo Toolkit - 如何使用按钮更改 table 列的颜色？

Question

我是 dojo 的完全初学者，只是一直在学习网站上的教程。现在我试图在按下按钮时动态更改 table 的背景颜色。这是我的 html 代码：

<!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();
});

Answer 1

您需要在节点上应用样式，所以

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

应该适合你。另一种方法是更改 css class。假设您有一个 css class 可以执行您想要的操作，并且您希望在单击按钮时应用它。你可以这样做

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

您还可以使用 onStyleRow 事件来设置行的样式

Dojo Toolkit - 如何使用按钮更改 table 列的颜色？

Dojo Toolkit - How to change the color of a table column with a button?

javascript

dojo

datagrid