Bob, Carol, Ted, Alice, Fred's, Wilma, Barney, "Betty", Bill & Ben, Cuthbert, Dibble, Grub, Ren, Stimpy
The option of adding attributes to the <table> tag.
The option of inserting spacer columns between the content columns (true/false).
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).
text : makeTable JS example
<script type="text/javascript" >
<!--
var sTags = "";
function escapeHtml(s) {
//alert('HTML: ' + s);
if (s != undefined) {
s = s.replace(/&/g, "&");
s = s.replace(/</g, "<");
s = s.replace(/>/g, ">");
s = s.replace(/"/g, """);
s = s.replace(/'/g, "'");
return s;
}
}
function escapeJs(s) {
//alert('JS: ' + s);
if (s != undefined) {
s = s.replace(/\'/g, "\\'");
s = s.replace(/\"/g, '"');
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> </td>"+(blnBeautifyTags?"\n":"");
}
}
} else {
//
sTags += sIndentTD+"<td> </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.