Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
95 lines (95 sloc) 2.44 KB
<!doctype html>
<html>
<head>
<style>
body{
font-family: helvetica;
}
#editor{
width: 650px;
height: 300px;
font-family: monaco, monospace;
font-size: 1em;
}
table{
width: 650px;
background-color: #eee;
border: 1px solid #888;
border-collapse: collapse;
color: #444;
}
td, th{
border: 1px solid #ccc;
padding: 0.2em 0.5em;
}
th{
min-width: 50px;
border-bottom: 2px solid #888;
}
td{
text-align: center;
}
td:first-child{
text-align: left;
font-weight: bold;
}
tr:nth-child(even){
background-color: #ddd;
}
</style>
</head>
<body>
<textarea id="editor">
1994 1995 1996 1997 1998 1999 2000 2001 2002
-----------------------------------------------------
Jan |14 13 14 13 14 11 11 11 11
Feb |13 15 12 15 15 12 14 13 13
Mar |16 15 14 17 16 15 14 15 15
Apr |17 16 17 17 17 15 15 16 16
May |21 20 20 21 22 20 21 20 19
Jun |24 23 25 24 25 23 25 23 24
Jul |29 28 26 26 27 26 25 26 25
Aug |29 28 27 28 28 27 26 28 26
Sep |24 23 23 26 24 24 24 22 21
Oct |20 22 20 22 20 19 20 22
Nov |18 17 16 17 16 15 14 15
Dec |15 13 13 14 13 10 13 11
</textarea>
<div id="renderer"></div>
<script src="tbl.js"></script>
<script>
var editor = document.getElementById('editor')
var renderer = document.getElementById('renderer')
function render(){
renderer.innerHTML = ''
renderer.innerHTML = tbl(editor.value)
}
editor.addEventListener('keyup', function(){
render()
}, false)
render()
var charHeight = 17
var charWidth = 10
editor.addEventListener('click', function(e){
var row = Math.floor(e.pageY / charHeight)
var col = Math.floor(e.pageX / charWidth)
console.log('row: ' + row + ', col: ' + col)
var text = editor.value
var rows = text.split('\n')
if (rows.length < row){
for (var r = rows.length; r < row; r++)
rows.push('')
}
console.log('num rows: ' + rows.length)
var line = rows[row - 1]
if (line.length < col){
for (var c = line.length; c < col; c++)
line += ' '
rows[row - 1] = line
}
editor.value = rows.join('\n')
console.log('"' + editor.value + '"')
}, false)
</script>
</body>
</html>