mirror of https://github.com/qurator-spk/neat.git
basic styling
cneud
5 years ago
parent
2506639b46
commit
3e0bb90c83
@ -1,51 +1,119 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<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}
|
||||||
</style>
|
table{table-layout:fixed;width:765px;text-align:center}
|
||||||
|
th{background-color:lightgray}
|
||||||
|
td:hover{background-color:yellow}
|
||||||
|
tr:hover{background-color:whitesmoke}
|
||||||
|
</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>
|
||||||
<tbody></tbody>
|
<table id="table">
|
||||||
</table>
|
<thead>
|
||||||
|
<tr>
|
||||||
<script>
|
<th>OFFSET</th>
|
||||||
var data;
|
<th>POSITION</th>
|
||||||
|
<th>TOKEN</th>
|
||||||
function handleFileSelect(evt) {
|
<th>NE-TAG</th>
|
||||||
var file = evt.target.files[0];
|
<th>NE-EMB</th>
|
||||||
|
</tr>
|
||||||
Papa.parse(file, {
|
</thead>
|
||||||
header: true,
|
<tbody></tbody>
|
||||||
delimiter: '\t',
|
</table>
|
||||||
comments: "#",
|
<script>
|
||||||
skipEmptyLines: true,
|
var data;
|
||||||
dynamicTyping: true,
|
|
||||||
complete: function(results) {
|
function handleFileSelect(evt) {
|
||||||
console.log(results);
|
var file = evt.target.files[0];
|
||||||
data = results;
|
|
||||||
$.each(results.data, function(i, el) {
|
Papa.parse(file, {
|
||||||
var row = $("<tr/>");
|
header: true,
|
||||||
row.append($("<td/>").text(i));
|
delimiter: '\t',
|
||||||
$.each(el, function(i, cell) {
|
comments: "#",
|
||||||
row.append($("<td/>").text(cell));
|
skipEmptyLines: true,
|
||||||
});
|
dynamicTyping: true,
|
||||||
$("#table tbody").append(row);
|
complete: function(results) {
|
||||||
});
|
console.log(results);
|
||||||
}
|
data = results;
|
||||||
});
|
$.each(results.data, function(i, el) {
|
||||||
}
|
var row = $("<tr/>");
|
||||||
|
row.append($("<td/>").text(i));
|
||||||
$(document).ready(function() {
|
$.each(el, function(i, cell) {
|
||||||
$("#tsv-file").change(handleFileSelect);
|
row.append($("<td/>").text(cell));
|
||||||
});
|
});
|
||||||
</script>
|
$("#table tbody").append(row);
|
||||||
<input type="file" id="tsv-file" name="files"/>
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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() {
|
||||||
|
$("#tsv-file").change(handleFileSelect);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue