Paste Excel Data Into Html Table
Solution 1:
This would only work reliably on IE since Firefox (and likely others) don't allow access to the clipboard without specifically allowing it; the earlier suggestion of pasting into a textarea first might work better than this.
When you copy from a spreadsheet, generally the cells are separated with a tab (chr9) and the rows with a CR (chr13). This script converts the clipboard into a 2D array and then builds a table from it. Not too elegant but it seems to work copying data out of Excel.
<html><head><scriptlanguage="javascript">functionclip() {
// get the clipboard textvar clipText = window.clipboardData.getData('Text');
// split into rows
clipRows = clipText.split(String.fromCharCode(13));
// split rows into columnsfor (i=0; i<clipRows.length; i++) {
clipRows[i] = clipRows[i].split(String.fromCharCode(9));
}
// write out in a table
newTable = document.createElement("table")
newTable.border = 1;
for (i=0; i<clipRows.length - 1; i++) {
newRow = newTable.insertRow();
for (j=0; j<clipRows[i].length; j++) {
newCell = newRow.insertCell();
if (clipRows[i][j].length == 0) {
newCell.innerText = ' ';
}
else {
newCell.innerText = clipRows[i][j];
}
}
}
document.body.appendChild(newTable);
}
</script></head><body><inputtype="button"onclick="clip()"></body></html>Solution 2:
Here is the javascript code I created (based on the helpful answers). I'm new to javascript, so I'm sure there is much better way to do this, but it seems to work... The goal is to "paste" two columns of numerical data into the text area from a spreadsheet (I've tried both excel and google spreadsheet) and create floating point vectors "xf" and "yf". Hopefully useful to someone. Criticism welcome...
It assumes these exist on an html page...
<textareaid="psmtext"rows=24cols=72></textarea><inputtype="button"value="run code"onClick="psmtest();">
function psmtest(){
varpsmtext= document.getElementById("psmtext");
varst= psmtext.value;
Ast = st.split("\n");
varnumrows= Ast.length;
var ii;
varxs= [];
varys= [];
for (ii = 0 ; ii < numrows ; ii++) {
// tab or comma deliminated dataif ( Ast[ii].split(",",2)[1] != null ){ ys[ii] = Ast[ii].split(",")[1]; xs[ii] = Ast[ii].split(",")[0];}
if ( Ast[ii].split("\t",2)[1] != null ){ ys[ii] = Ast[ii].split("\t")[1]; xs[ii] = Ast[ii].split("\t")[0];}
}
varxss= [];
varyss= [];
varnumgoodrows=0;
variii=0;
for (ii = 0 ; ii < numrows ; ii++) {
if ( xs[ii] != null && ys[ii] != null) {
xss[iii] = xs[ii];
yss[iii] = ys[ii];
iii++;
}
}
numgoodrows = iii;
// next I need to convert to floating point array var xf = [], var yf = [];varxf= [];
varyf= [];
for (ii = 0 ; ii < numgoodrows ; ii++) {
xf[ii] = parseFloat(xss[ii]);
yf[ii] = parseFloat(yss[ii]);
}
}
Solution 3:
This is going to be very difficult to do really well.
Off the top of my head, I'd say the best approach would be to give the users a <textarea> that they can paste into. Then, in the onchange event handler, use some JS parsing to figure out where the rows and columns line up, create the HTML table and inject it into the DOM.
This should work alright for a relatively "square" dataset - you might run into more issues with merged columns/rows and "jagged" data
Solution 4:
Although this question is considered answered already (and is an oldy), I'd like to point out that there are better solutions nowadays, see jQuery Spreadsheet/Grid plugin with copy/paste from/to Excel . I particularly like the minimalism of the HandsOnTable that was suggested by warpech (also the creator of this jQuery plugin). The plugin is still being maintained very well.
Post a Comment for "Paste Excel Data Into Html Table"