Questions:
On the td class “edit” i only want to show the span class “look” and strip the other select class option values and than import them into excel.
<tr class="proj_rec" data-id="4">
<td class="proj_id">
4 </td>
<td>
Music in the stores </td>
<td class="edit">
<select class="touch" style="display: none;">
<option value="13">Bloopers</option><option value="1">Customer Service</option><option value="2">DC</option><option value="3">Ecommerce</option><option value="4">Finance/Accounting</option><option value="5">Human Resources</option><option value="6">Inbound Logistics</option><option value="7">Information Systems</option><option value="14">Management</option><option value="8">Marketing</option><option value="9">Merchandising</option><option value="10">Property</option><option value="11">Rebuying</option><option value="12">Sales</option> </select>
<span class="look">
Sales </span>
</td>
<td class="edit">
<select class="touch" style="display: none;">
<option value="1">As is review</option><option value="2">Complete</option><option value="3">Development</option><option value="4">Implemented</option><option value="5">Not started</option><option value="6">To be design</option> </select>
<span class="look">
As is review </span>
</td>
<td class="edit">
<select class="touch" style="display: none;">
<option value="1"> Objective</option><option value="2"> People</option><option value="3"> Process</option><option value="4"> Systems</option> </select>
<span class="look">
Process </span>
</td>
Right now I have these blanks showing up and I think it’s due to it rendering all the options of the select class.
I tried a few options but to no avail. Here’s where i’m at right now. It’s removing the UI options after exporting and i’m still having the problem in excel like shown above in the image.
<td><input type="button" id="dlink" onclick="tableToExcel('project_table', 'W3C Example Table')" value="Export to Excel"></td>
<a id="dlink" style="display:none;"></a>
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 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
return function (table, name, filename) {
$('#'+table+' .touch').each(function(){
$(this).parent().prepend($(this).val()); //if you want to keep the values.
});
$('#'+table+' .touch').remove();
//if (!table.nodeType) table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = filename;
document.getElementById("dlink").click();
$('#'+table).remove();
}
})()
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 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }
return function (table, name, filename) {
$('#'+table+' .touch').each(function(){
$(this).parent().text($(this).val()); //if you want to keep the values.
});
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
document.getElementById('dlink').href = uri + base64(format(template, ctx));
document.getElementById('dlink').download = filename;
document.getElementById('dlink').click();
$('#'+table+' .look').each(function(){
$(this).parent().text($(this).text()); //get text from span and replace parent innerHtml with it
});
}
})()
How to&Answers:
Let’s try wiping out the select and the span by simply using text() which would replace any html within each td with just text
$('#'+table+' .touch').each(function(){
$(this).parent().text($(this).val()); //if you want to keep the values.
});
OR use the text from the span:
$('#'+table+' .look').each(function(){
$(this).parent().text($(this).text()); //get text from span and replace parent innerHtml with it
});
Tags: html, input, java, javascriptjavascript, jquery, select
