We have already discussed how to convert an Excel table to HTML table with an Excel macro. Today we will see how to make it even easier. You can now directly copy and paste the Excel table in a textbox to convert it to HTML. This has been made with a simple JavaScript.
How JavaScript can do it ?
When you copy something from Excel, automatically a tab is inserted between each cells. Now a code has been written in JavaScript which detects the tab and replace it with appropriate HTML parameters.
Paste the Excel table in below box
Can I get its source code ?
<script>
function generateCode(){
var input=document.getElementById('inputTableArea').value;
var output= input.replace("&","&");
output= output.replace("<","<");
output= output.replace(">",">");
output= output.replace('"',""");
output= output.replace("'","'");
output= output.replace(/t/g,"</td><td>");
output= output.replace(/n/g,"</td></tr><tr><td>");
document.getElementById('displayPara').style.display="block";
var tableStyle="<style type='text/css'>table.quickTable {border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;font-size: 12px;}.quickTable td {padding: 4px;border: 1px solid #ccc;}</style>";
document.getElementById('displayHTMLDiv').innerHTML=tableStyle+'<table class="quickTable" border="1px" cellpadding="2" cellspacing="2"><tr><td>'+output+'</td></tr></table>';
output='<table class="quickTable" cellpadding="2" cellspacing="2"><tr><td>'+output+'</td></tr>n</table>';
output=output.replace(/<tr>/g,"n<tr>");
tableStyle="<style type='text/css'>ntable.quickTable {nborder: 1px solid #CCC; nfont-family: Arial, Helvetica, sans-serif;font-size: 12px;n}n.quickTable td {npadding: 4px;nborder: 1px solid #ccc;n}n</style>n";
document.getElementById('outputCodeArea').value=tableStyle+output;
}
</script>
<div style="margin-left:100px">Paste the Excel table in below box</div>
<textarea id='inputTableArea' style="width:450px;height:100px; margin-left:100px;"></textarea>
<br/>
<input type="button" value='Generate' onClick='generateCode()' style="margin-left:473px;margin-top:15px;margin-bottom:15px;">
<br/>
<div id="displayHTMLDiv" style="margin-left:100px; width:452px; overflow:auto;" >
</div>
<p id="displayPara" style="display:none;margin-left:100px">
Generate HTML Table<br/>
<textarea id='outputCodeArea' style="width:450px;height:100px;overflow:auto;"></textarea>
</p>
