slackorama · June 10, 2009 16:49
diff --git a/create-and-destroy-onclick.html b/create-and-destroy-onclick.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
  <head>
    <title>testing</title>
    <meta name="author" content="Seth Mason">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
        @import "/js/dijit/themes/tundra/tundra.css";
        @import "/js/dojo/resources/dojo.css";

        body { background:#ddd;color:#000;font:12px tahoma,'trebuchet ms', sans-serif; }
        h1 { font:300% georgia,times,serif; }
        
    </style>
    <script type="text/javascript" src="/js/dojo/dojo.js"
            djConfig="parseOnLoad: true"></script>
    
     <script type="text/javascript">
       <!--

         var connects = [];

         function destroyAndCreateTable() {
            console.log(" destroying and creating!!!");
            console.log( 'connects = ', connects.length );
            // kill the connects and then the table
            dojo.forEach( connects, dojo.connect );
            connects = [];            
            dojo.query("table").orphan();

            // creating
            var table = dojo.create("table");
            var tr1 = dojo.create("tr");
            var tr2 = dojo.create("tr");
            dojo.forEach([2,1], function(x) {
              dojo.create("th",{innerHTML: 'Row ' + x },tr1,"first");
              dojo.create("td",{ innerHTML: "Data " + x }, tr2, "first" );
            });
            dojo.place( tr1, table, "first");
            dojo.place( tr2, table, "last");
            dojo.place( table, dojo.byId("doc"),"last");
            doConnects( );
         }

         function doConnects(  ) {
           dojo.query( 'th' ).forEach( function( node ) {
             connects.push( dojo.connect( node, "onclick", destroyAndCreateTable
             ) );
           });
         }

         dojo.addOnLoad( function() {
           doConnects();
         });

       //-->
     </script>
  </head>
  <body id="da_body">
    <div id="doc">
      <h1>testing</h1>

      <table id="tester">
        <tr><th>Row 1</th><th>Row 2</th></tr>
        <tr><td>data1</td><td>data2</td></tr>
        </table>
    
     </div>
  </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html lang="en">
	<head>
	<title>testing</title>
	<meta name="author" content="Seth Mason">
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<style type="text/css">
	@import "/js/dijit/themes/tundra/tundra.css";
	@import "/js/dojo/resources/dojo.css";

	body { background:#ddd;color:#000;font:12px tahoma,'trebuchet ms', sans-serif; }
	h1 { font:300% georgia,times,serif; }

	</style>
	<script type="text/javascript" src="/js/dojo/dojo.js"
	djConfig="parseOnLoad: true"></script>

	<script type="text/javascript">
	<!--

	var connects = [];

	function destroyAndCreateTable() {
	console.log(" destroying and creating!!!");
	console.log( 'connects = ', connects.length );
	// kill the connects and then the table
	dojo.forEach( connects, dojo.connect );
	connects = [];
	dojo.query("table").orphan();

	// creating
	var table = dojo.create("table");
	var tr1 = dojo.create("tr");
	var tr2 = dojo.create("tr");
	dojo.forEach([2,1], function(x) {
	dojo.create("th",{innerHTML: 'Row ' + x },tr1,"first");
	dojo.create("td",{ innerHTML: "Data " + x }, tr2, "first" );
	});
	dojo.place( tr1, table, "first");
	dojo.place( tr2, table, "last");
	dojo.place( table, dojo.byId("doc"),"last");
	doConnects( );
	}

	function doConnects( ) {
	dojo.query( 'th' ).forEach( function( node ) {
	connects.push( dojo.connect( node, "onclick", destroyAndCreateTable
	) );
	});
	}

	dojo.addOnLoad( function() {
	doConnects();
	});

	//-->
	</script>
	</head>
	<body id="da_body">
	<div id="doc">
	<h1>testing</h1>

	<table id="tester">
	<tr><th>Row 1</th><th>Row 2</th></tr>
	<tr><td>data1</td><td>data2</td></tr>
	</table>

	</div>
	</body>
	</html>