Classe in JavaScript per generare una tabella Html

In alcuni siti e applicazioni web una parte del contenuto html viene generato dinamicamente tramite JavaScript.

In questo esempio anziché creare direttamente la stringa html si crea una classe in JavaScript chiamata HtmlTable che rappresenta la tabella html. Poi si aggiungono due metodi chiamati  AddRowGetHtml rispettivamente per aggiungere una riga e per ottenere il codice html risultante.

Il vantaggio di questa tecnica consiste nell'evitare di avere codice javascript mescolato a codice html nello script finale. Questo rende il codice JavaScript più leggibile.

Ecco il codice risultante, nel quale si crea una tabella composta da tre righe e tre colonne che poi viene iniettata in un div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Classe JavaScript per generare una tabella html - Dev-OClock.com</title>
        <style type="text/css">
            .srb-table tr td
            {
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        
        <!-- div container -->
        <div id="div-table"></div>
        
        <script type="text/javascript">
            
            //*** class definition ***
            
            function HtmlTable(id, cssClass, cssInline) {
                //constructor
                this.id = id;
                this.cssClass = cssClass;
                this.cssInline = cssInline;
                this.htmlOutput = "<table id=\"" + this.id + "\" class=\"" + this.cssClass + "\" style=\"" + this.cssInline + "\">";
            }
                        
            //public method for adding a row
            HtmlTable.prototype.AddRow = function(arrCols, arrCssCols, arrCssRow) {
                if (arrCssRow && arrCssRow.length > 0) {
                    this.htmlOutput += "<tr class=\"" + arrCssRow + "\">";
                }
                else {
                    this.htmlOutput += "<tr>";
                }                
                for(var i = 0; i < arrCols.length; i++) {
                    if (arrCssCols && arrCssCols[i].length > 0) {
                        this.htmlOutput += "<td style=\"" + arrCssCols[i] + "\">" + arrCols[i] + "</td>";
                    }
                    else {
                        this.htmlOutput += "<td>" + arrCols[i] + "</td>";
                    }
                }
                this.htmlOutput += "</tr>";                
            }
            
            //public method for getting the resulting html
            HtmlTable.prototype.GetHtml = function() {
                return this.htmlOutput + "</table>";
            }
            
            //*** how to use the class ***
            
            //creates an instance of the class (object)
            var myTable = new HtmlTable("test-table-id", "srb-table", "width: 80%");
            
            //calls the method passing an array as argument
            riga = new Array("r1c1", "r1c2", "r1c3");
            myTable.AddRow(riga, "", "");
            
            //declaring the array on the fly
            myTable.AddRow(new Array("r2c1", "r2c2", "r2c3"), "", "");
            
            //we can also pass only a part of the arguments
            myTable.AddRow(new Array("r3c1", "r3c2", "r3c3"));
            
            //injects the resulting html into the div
            document.getElementById('div-table').innerHTML = myTable.GetHtml();    
        </script>
    </body>
</html>

 

Autore: Sergio Roberto Boarina