Untitled

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tutorial: dojo.behavior</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css">
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css">
        <!-- load dojo and provide config via data attribute -->
        <script type="text/javascript">
            var djConfig = {
                    parseOnLoad : true,
                    Locale : "ru"
            };
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.4.3/dojo/dojo.xd.js"></script>
        </script>
        <style type="text/css">
            .selectedMail{
                background-color: greenyellow;
            }
            .divvy{
                width:100px;
                height:100px;
                /*overflow-x:scroll;*/
                overflow-y:auto;
                background-color: aqua;
            }
        </style>
        <script>
            dojo.require("dojo.behavior");
            dojo.require("dijit.form.Button");
            // track the number of products "bought"
            var productCount = 0;

            // function to update rendering for the summary
            function remove() {
                dojo.forEach(
                    dojo.query(".selectedMail"),
                    function(selectTag) {
                         dojo.destroy(selectTag);
                    }
                  );
            }

            // a simple behavior 'sheet', which sets up event handlers on all elements
            // which match the '.buyButton' query
            var myBehavior = {
                ".row": {
                    //onclick: dojo.addClass(evt.target, "buttonDown")
                    onmousedown: function(evt) {
                        if(dojo.hasClass(evt.target, "selectedMail"))
                            dojo.removeClass(evt.target, "selectedMail");
                        else
                            dojo.addClass(evt.target, "selectedMail");
                    }
                }
            };
            function add() {
                //dojo.place("#hold", dojo.create("<h1>", { innerHTML: "<i>hi</i>" }));
                var tr = dojo.create("tr", { innerHTML: "<td>Hi there!</td>", class: "row"});
                //dojo.create("tr", { innerHTML: "<td>Hi there!</td>", class: "row"}, "tbody123", "last");
                dojo.place(tr, "tbody123", "last");

                //dojo.behavior.add(myBehavior);
                // apply all registered behaviors to the current document
                dojo.behavior.apply();
            }

            // Wait for the DOM to be ready
            // and dependencies loaded before working with either
            dojo.ready(function() {
                // register the behavior 'sheet'
                dojo.behavior.add(myBehavior);
                // apply all registered behaviors to the current document
                dojo.behavior.apply();

            });
        </script>
    </head>
    <body>
        <button
            id="butt"
            dojoType="dijit.form.Button"
            type="button"
            style="margin-left:10px"
            onClick="remove();">
        del
        </button>
        <button
            id="del"
            dojoType="dijit.form.Button"
            type="button"
            style="margin-left:10px"
            onClick="add();">
        add
        </button>
    <div id="hold"> </div>
        <div class="divvy">
        <table>
            <tbody id="tbody123">
                <tr class="row">
                    <td >simplesimplesimplesimplesimple</td>
                </tr>
                <tr class="row">
                    <td>simplesimplesimplesimplesimple</td>
                </tr>
                <tr class="row">
                    <td>simplesimple</td>
                </tr>
                <tr class="row">
                    <td>simple</td>
                </tr>
            </tbody>
        </table>
        </div>


<div class="destr"> destroy me</div>

<button dojoType="dijit.form.Button" id="myButton">
    Press me!
    <script type="dojo/method" event="onClick">
        dojo.forEach(
            dojo.query(".destr"),
                function(selectTag) {
                     dojo.destroy(selectTag);
                }
          );
    </script>
</button>


    </body>
</html>