qurator-spk
/
neat
mirror of https://github.com/qurator-spk/neat.git
1
0
Fork 0
Code Issues Releases Wiki Activity

basic styling

Browse Source
pull/39/head
cneud 5 years ago
parent 2506639b46
commit 3e0bb90c83
1 changed files with 112 additions and 44 deletions
Show Stats Download Patch File Download Diff File

80
ner.ed.html
Unescape Escape View File

@ -2,19 +2,32 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>ner.ed</title> <title>ner.edith</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.0.1/papaparse.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.0.1/papaparse.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style> <style>
body{font-family:Courier;font-size:24px} body{font-family:Courier;font-size:16px}
table{table-layout:fixed;width:765px;text-align:center}
th{background-color:lightgray}
td:hover{background-color:yellow}
tr:hover{background-color:whitesmoke}
</style> </style>
</head> </head>
<body> <body>
<strong>ner.ed</strong><br><br> <h3>ner.edith: named entity recognition editor in html</h3>
<table id="results"> Please upload a TSV (tab-separated-values) file in the <a href="https://sites.google.com/site/germeval2014ner/data">GermEval2014 data format</a>: <input type="file" id="tsv-file" name="files"/><br><br>
<table id="table">
<thead>
<tr>
<th>OFFSET</th>
<th>POSITION</th>
<th>TOKEN</th>
<th>NE-TAG</th>
<th>NE-EMB</th>
</tr>
</thead>
<tbody></tbody> <tbody></tbody>
</table> </table>
<script> <script>
var data; var data;
@ -42,10 +55,65 @@
}); });
} }
// https://javascript.info/task/edit-td-click
let table = document.getElementById('table');
let editingTd;
table.onclick = function(event) {
let target = event.target.closest('.edit-cancel,.edit-ok,td');
if (!table.contains(target)) return;
if (target.className == 'edit-cancel') {
finishTdEdit(editingTd.elem, false);
} else if (target.className == 'edit-ok') {
finishTdEdit(editingTd.elem, true);
} else if (target.nodeName == 'TD') {
if (editingTd) return;
makeTdEditable(target);
}
};
function makeTdEditable(td) {
editingTd = {
elem: td,
data: td.innerHTML
};
td.classList.add('edit-td');
let textArea = document.createElement('textarea');
textArea.style.width = td.clientWidth + 'px';
textArea.style.height = td.clientHeight + 'px';
textArea.className = 'edit-area';
textArea.value = td.innerHTML;
td.innerHTML = '';
td.appendChild(textArea);
textArea.focus();
td.insertAdjacentHTML("beforeEnd",
'<div class="edit-controls"><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>'
);
}
function finishTdEdit(td, isOk) {
if (isOk) {
td.innerHTML = td.firstChild.value;
} else {
td.innerHTML = editingTd.data;
}
td.classList.remove('edit-td');
editingTd = null;
}
$(document).ready(function() { $(document).ready(function() {
$("#tsv-file").change(handleFileSelect); $("#tsv-file").change(handleFileSelect);
}); });
</script> </script>
<input type="file" id="tsv-file" name="files"/>
</body> </body>
</html> </html>
Write Preview
Loading…
Cancel
Save