Changeset 33 for collected/trunk

Show
Ignore:
Timestamp:
12/14/07 13:58:02 (13 months ago)
Author:
simon
Message:

Changed table generation to use innerHTML and made the table HTML source available for collecting results from different browsers together.

Files:
1 modified

Legend:

Unmodified
Added
Removed

  • collected/trunk/html-test-cases/getting-tabindex.html

    r30 r33  
    77<title>Getting the tabindex value of an element with JavaScript</title> 
    88<script type="text/javascript"> 
    9 function Logger(id){ 
    10         this._id = id; 
     9function Logger(){ 
     10        this._rows = ""; 
    1111} 
    12 Logger.prototype._makeTd = function(text){ 
    13         var td = document.createElement("td"); 
    14         td.appendChild(document.createTextNode(text)); 
    15         return td; 
     12Logger.prototype.log = function(desc, mechanism, value){ 
     13        value = (value === null) ? "null" : value; 
     14        this._rows += "<tr><td>" + desc + "<\/td><td>" 
     15                + mechanism + "<\/td><td>" + value + "<\/td><\/tr>\n"; 
    1616}; 
    17 Logger.prototype.log = function(desc, mechanism, value){ 
    18         var table = document.getElementById(this._id); 
    19         var tbody = table.getElementsByTagName("tbody")[0]; 
    20         var tr = document.createElement("tr"); 
    21         tr.appendChild(this._makeTd(desc)); 
    22         tr.appendChild(this._makeTd(mechanism)); 
    23         if(value === null){ 
    24                 tr.appendChild(this._makeTd("null")); 
    25         }else{ 
    26                 tr.appendChild(this._makeTd(value)); 
    27         } 
    28         tbody.appendChild(tr); 
     17Logger.prototype.getHTML = function(){ 
     18        return "<table><thead>" 
     19                + "<tr><th>Element<\/th><th>Mechanism<\/th><th>Value<\/th><\/tr>" 
     20                + "<\/thead><tbody>\n" 
     21                + this._rows 
     22                + "<\/tbody><\/table>\n"; 
    2923}; 
    3024Logger.prototype.logGetAttribute = function(id, desc, attr, iFlags){ 
    … …  
    7670        return navigator.userAgent.indexOf("MSIE") != -1; 
    7771} 
     72function showTableSource(){ 
     73        document.getElementById("source").style.display = "block"; 
     74} 
    7875function removeTabindex(id){ 
    7976        var elem = document.getElementById(id); 
    … …  
    8986        removeTabindex("div-tabindex-removed"); 
    9087        removeTabindex("input-tabindex-removed"); 
    91         logger = new Logger("log"); 
     88        logger = new Logger(); 
    9289        logger.logTabindex("div-no-tabindex", "div with no tabindex"); 
    9390        logger.logTabindex("div-tabindex-1", 'div with tabindex="1"'); 
    … …  
    9693        logger.logTabindex("input-tabindex-1", 'input with tabindex="1"'); 
    9794        logger.logTabindex("input-tabindex-removed", "input with tabindex removed"); 
     95        document.getElementById("log").innerHTML = logger.getHTML(); 
     96        var sourceTextNode = document.createTextNode(logger.getHTML()); 
     97        document.getElementById("source").appendChild(sourceTextNode); 
    9898} 
    9999</script> 
    … …  
    104104<div id="userAgent"></div> 
    105105<h2>Results</h2> 
    106 <table id="log"> 
    107 <thead> 
    108 <tr><th>Element</th><th>Mechanism</th><th>Value</th></tr> 
    109 </thead> 
    110 <tbody></tbody> 
    111 </table> 
     106<div id="log"></div> 
     107<hr> 
     108<div><button onclick="showTableSource()">Show table source</button></div> 
     109<pre id="source" style="display:none"></pre> 
    112110<hr> 
    113111<div id="div-no-tabindex"></div> 
    114112<div id="div-tabindex-1" tabindex="1"></div> 
    115113<div id="div-tabindex-removed" tabindex="1"></div> 
     114<div> 
    116115<input id="input-no-tabindex"> 
    117116<input id="input-tabindex-1" tabindex="1"> 
    118117<input id="input-tabindex-removed" tabindex="1"> 
     118</div> 
    119119</body> 
    120120