HTML Kit site requirements.

HTML editor / Mini Tutorial
HomeHTML-Kit downloadsAdd-ins that update and extend HTML-Kit's capabilitiesSoftware and authoring support channelsRegister -- download add-ons and support HTML-KitOnline tools for HTML-Kit users
 

Mini Tutorial

 Home > Support > Community > Mini Tutorials > Plugins > hkTableFromL...
 
 
Click for Details
 hkTableFromLines Tutorial - Part 2

Following is a demo of a JavaScript function derived from HTML-Kit's hkTableFromLines plugin. The JS code dynamically turn the following example list dynamically into a magzine-style table (i.e. fill columns then rows):

Bob, Carol, Ted, Alice, Fred's, Wilma, Barney, "Betty", Bill & Ben, Cuthbert, Dibble, Grub, Ren, Stimpy

The following are also dynamically set:

The option of adding attributes to the <table> tag.
   Here: border="0" cellspacing="0" cellpadding="2" width="100%"
The option of inserting spacer columns between the content columns (true/false).
   Here: true
The option of adding other table cell code, e.g. a hyperlink or form element.
   Here: <a href="#" onclick="copyForm('{{TEXT_JS}}'); return false;"<{{TEXT_ORIG}}</a>
The option of various string escaping in table cell contents.
   Here: {{TEXT_JS}} = list string escaped for JS, {{TEXT_ORIG}} = list string escaped for HTML
The option to indent the source text (true/false).
   Here: true

Note: the links in the table produced below are not linked to functioning code.

text : makeTable JS example
<script type="text/javascript" >
<!--

var sTags = "";

function escapeHtml(s) {
    //alert('HTML: ' + s);
    if (s != undefined) {
        s = s.replace(/&/g, "&amp;");
        s = s.replace(/</g, "&lt;");
        s = s.replace(/>/g, "&gt;");
        s = s.replace(/"/g, "&quot;");
        s = s.replace(/'/g, "&#39;");
        return s;
    }
}

function escapeJs(s) {
    //alert('JS: ' + s);
    if (s != undefined) {
        s = s.replace(/\'/g, "\\'");
        s = s.replace(/\"/g, '&quot;');

        return s;
    }
}

var strSourceText = 'Bob\nCarol\nTed\nAlice\nFred\'s\nWilma\nBarney\n\"Betty\"\nBill \& Ben\nCuthbert\nDibble\nGrub\nRen\nStimpy';
var strVarTableCols = 5;
var strVarTableAttrs = 'border=\"0\" cellspacing=\"0\" cellpadding=\"2\" width=\"100%\"';
var strVarCellFormat = '<a href=\"#\" onClick=\"alert(\'{{TEXT_JS}}\'); return false;\">{{TEXT_ORIG}}</a>';
var blnAddSeparators = true;
var blnBeautifyTags = true;

function makeTable(strSourceText, strVarTableCols, strVarTableAttrs, strVarCellFormat, blnAddSeparators, blnBeautifyTags) {
    // blnAddSeparators:- add separator columns
    // blnBeautifyTags:- tidy source code

    //alert('source = ' + strSourceText);
    //alert('Attribs:: ' + strVarTableAttrs);
    //alert('Cell contents:: ' + strVarCellFormat);

    // create an array that will hold the source text
    var nLinesCount = 0;
    var nCols = 0, //blnAddSeparators = 0, blnBeautifyTags = 0;
    // split the source text into separate lines
    aLines = strSourceText.split('\n');
    // count the number of lines (array size)
    nLinesCount = aLines.length;
    //alert('Input lines = ' + aLines.length);
    // check/coerce following vars to numbers
    nCols = parseInt(strVarTableCols); // number of columns
   
    // if #Columns AND #SourceLines are > 0
    if( (nCols > 0) && (nLinesCount > 0) ) {
        // declare working vars
        var sOutput = "", strCell = "", sIndentTD = "", sTags = "";
        var nRows = 0, c = 0, r = 0, i = 0;
        // if #SourceLInes is > or = to #Columns
        if(nLinesCount >= nCols) {
            // #Rows = #SourceLInes/#Columns
            nRows = Math.ceil(nLinesCount / nCols);
            // while (#Rows x #Columns) is < #SourceLInes
            while(nRows*nCols < nLinesCount) {
                // increment #Rows by 1
                ++nRows;
            }
        } else {
            // otherwise #Rows is 1
            nRows = 1;
        }
        // begin: construct the tags
        sIndentTD = (blnBeautifyTags?" ":"");
        // iterate rows from zero to (#Rows -1) step size = 1
        for(r=0; r<nRows; r++) {
            // start the row tags, source return if tidying
            sTags += "<tr>"+(blnBeautifyTags?"\n":"");
            // iterate columns from zero to (#Columns -1) step size = 1
            for(c=0; c<nCols; c++) {
                // counter 'i' = #Rows x #Columns plus current row #
                i = (nRows*c)+r;
                // if tidying source
                if(blnBeautifyTags) {
                    // if not the row and showing serial numbers or
                    // column sepatators
                    if( (blnAddSeparators) && (c>0) ) {
                        // append: source newline
                        sTags += "\n";
                    }
                }
                // if current line# is < total line #
                if(i < nLinesCount) {
                    // start with the cell contents, looking for {{TEXT}} wrappers
                    strCell = strVarCellFormat;
                    //alert('Cell contents = ' + strVarCellFormat);
                    // escape cell source for HTML if {{TEXT}} found
                    strCell = strCell.replace(/\{\{TEXT\}\}/g, escapeHtml(aLines[i]));
                    // just repeat cell source verbatim where {{TEXT}} found
                    strCell = strCell.replace(/\{\{TEXT_ORIG\}\}/g, aLines[i]);
                    // escape cell source for JS if {{TEXT_JS}} found
                    strCell = strCell.replace(/\{\{TEXT_JS\}\}/g, escapeJs(aLines[i]));
                    //alert('i = ' + i + ', Row = ' + r + ', Column = ' + c + ', Contents = ' + strCell);
                    //
                    sTags += sIndentTD+"<td>"+ strCell +"</td>"+(blnBeautifyTags?"\n":"");
                    //
                    if(blnAddSeparators) {
                        //
                        if(c<nCols-1) {
                            //
                            sTags += sIndentTD+"<td>&nbsp;</td>"+(blnBeautifyTags?"\n":"");
                        }
                    }
                } else {
                    //
                    sTags += sIndentTD+"<td>&nbsp;</td>"+(blnBeautifyTags?"\n":"");
                }
            }
            //
            sTags += "</tr>\n";
        }
        // output string HTML comment with number of items
        sOutput = "<!-- " + nLinesCount.toString() + " item table -->\n";
        // add: open table tag
        sOutput += "<table";
        // any table attributes to add?
        if(strVarTableAttrs.length) {
            // add: attributes
            sOutput += " "+strVarTableAttrs;
        }
        // add: close tag and whitespace new line
        sOutput += ">\n";
        // add: table data
        sOutput += sTags;
        // add: close tag and
        sOutput += "</table>\n";
        // end construct the tags
        // now return the output
        //alert (sOutput);
        return sOutput;
    }
}

// -->
</script>

Once the JS code containing the makeTable() function is included in the document, the following code can be used to dynamically generate the table.

text : Calling makeTable()
<script type="text/javascript">
<!--

strResult = makeTable(strSourceText, strVarTableCols,
    strVarTableAttrs, strVarCellFormat, blnAddSeparators,
    blnBeautifyTags);

document.write(strResult);

//alert('done!');
// -->
</script>

Your feedback is appreciated

Have questions? Feel free to post them on the HTML-Kit Support Forums.

Subject: 
Message: 
 
Optional Information:
Name: 
Email: 
Website: 
Rating: 
None  1/5  5/5 
Type: 
Public comment
Private message to the author
 
 
(C) 2004, Mark Anderson. Read about Adobe Acrobat and Extensis Portfolio at Mark Anderson's Home Page.