Export multiple HTML tables to Excel
Several issues I wish to resolve: 1) Check-boxes and radio-buttons come through as pictures when what I want is the data. 2) Optional "comment" fields text not coming through (click on the radio button "NOK" and you're prompted to input comments). 3) Current method does not work for Internet Explorer.
by Carlos Ng
HTML
<script src="http://cdn.jsdelivr.net/sisyphus/1.1.103/sisyphus.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<form id="picsform" name="picsform">
<div class="formHeader">
<table>
<tr>
<td style="width: 170px; height:40px;" class="nobdrLtMid">reserved for company logo</td>
<td class="formTitle" style="width: 650px;">PIC/S Checklist</td>
</tr>
<tr>
<td class="nobdrRtMid" style="padding-left: 170px;">
<label for="Company">Company:</label>
</td>
<td class="nobdrLtMid" style="width: 200px;">
<input class="nobdrLtMid" type="text" id="Company" name="Company" title="Company" style="width: 100%">
</td>
</tr>
</table>
<div class="clearBoth"></div>
<table style="padding-bottom: 10px;">
<tr>
<td class="nobdrRtMid" style="width: 100px;">
<label for="form.number">Form Number:</label>
</td>
<td class="nobdrLtMid" style="width: 125px;">
<input name="form.number" type="text" class="textfield" id="form.number" title="Form Number" style="width:100%;" />
</td>
<td class="nobdrRtMid" style="width: 100px;">
<label for="form.created">Date Created:</label>
</td>
<td class="nobdrLtMid" style="width: 125px;">
<input name="form.created" type="text" class="textfield" id="form.created" title="Date Created" style="width:100%;" />
</td>
<td class="nobdrRtMid" style="width: 100px;">
<label for="form.creatorname">Created By:</label>
</td>
<td class="nobdrLtTop" style="width: 150px;">
<input name="form.creatorname"...CSS
/* begin: text-fields styles */
input, input[type="password"], input[type="search"], isindex, textarea {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* end: text-fields styles */
/* begin: toolbar styles */
.toolbar {
margin-bottom:5px;
height:20px;
}
.toolbar .tlb-btn {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
cursor: pointer;
text-align:center;
}
.toolbarBluebtn {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0));
background:-moz-linear-gradient(center top, #3d94f6 5%, #1e62d0 100%);
background-color:#1e62d0;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #075bd1;
color:#ffffff;
font-family:Arial, sans-serif;
font-size:.8em;
font-weight:bold;
text-decoration:none;
height:100%;
}
.toolbarBluebtn:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6));
background:-moz-linear-gradient(center top, #1e62d0 5%, #3d94f6 100%);
background-color:#3d94f6;
}
.toolbarBluebtn:active {
position:relative;
top:1px;
}
/* HTML Fields */
.show {
display: inline-block;
}
.clearBoth {
clear: both;
}
.container {
width:1010px;
}
.formHeader {
...JavaScript
$('input:radio').live('change', function(){
var sstrSect = ($(this).attr('name').substr([3]));
var comFldId = ("C" + sstrSect);
if ($(this).val() == "NOK"){
document.getElementById(comFldId).style.display = '';
} else {
document.getElementById(comFldId).style.display = 'none';
}
});
$('input[type="radio"]:checked').each(function() {
var sstrSect = ($(this).attr('name').substr([3]));
var comFldId = ("C" + sstrSect);
if ($(this).val() == "NOK"){
document.getElementById(comFldId).style.display = '';
} else {
document.getElementById(comFldId).style.display = 'none';
}
});
function toExcel() {
if ("ActiveXObject" in window) {
alert("This is Internet Explorer!");
} else {
var cache = {};
this.tmpl = function tmpl(str, data) {
var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) :
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
"with(obj){p.push('" +
str.replace(/[\r\t\n]/g, " ")
.split("{{").join("\t")
.replace(/((^|}})[^\t]*)'/g, "$1\r")
.replace(/\t=(.*?)}}/g, "',$1,'")
.split("\t").join("');")
.split("}}").join("p.push('")
.split("\r").join("\\'") + "');}return p.join('');");
return data ? fn(data) : fn;
};
var tableToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,',
template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso...