Skip to content

Instantly share code, notes, and snippets.

@yukioc
Created February 5, 2011 18:08
Show Gist options
  • Select an option

  • Save yukioc/812644 to your computer and use it in GitHub Desktop.

Select an option

Save yukioc/812644 to your computer and use it in GitHub Desktop.
display TSV files(s) by HTML table.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css"><!--
body { border:1px solid gray; padding: 5px; }
table,th,td { border:1px solid gray; border-collapse:collapse; }
--></style>
</head>
<body>
<div id="mes" style="margin:50px;">drop tsv file(s)</div>
<div id="list"></div>
<script language="JavaScript">
var shops = {};
var table = document.createElement('TABLE');
var tbody = document.createElement('TBODY');
table.appendChild(tbody);
function tsv_parse(text){
var lines=text.split("\n");
for(var i=0,l;l=lines[i];i++){
var fields=l.split("\t");
if(fields.length==0) return;
var tr=document.createElement('TR');
for(var j=0,f;f=fields[j];j++){
var td=document.createElement('TD');
td.innerHTML = f;
tr.appendChild(td);
}
tbody.appendChild(tr);
}
document.getElementById('mes').style.display='none';
document.getElementById('list').appendChild(table);
}
//--- drag and drop
function drop(evt) {
evt.stopPropagation();
evt.preventDefault();
//--- load files
var files=evt.dataTransfer.files;
for(var i=0,f;f=files[i];i++){
if(f.name.match(/\.(tsv|txt)$/)) {
var reader = new FileReader();
reader.onerror = function(evt){
alert("errcode:"+evt.target.error.code);};
reader.onload = function(evt){
tsv_parse(evt.target.result);}
reader.readAsText(f);
}
}
}
function dragenter(evt) {
evt.stopPropagation();
evt.preventDefault();
}
function dragover(evt) {
evt.stopPropagation();
evt.preventDefault();
}
// setup the dnd listeners.
document.body.addEventListener('dragenter', dragenter, false);
document.body.addEventListener('dragover', dragover, false);
document.body.addEventListener('drop', drop, true);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment