I am building an app with App Inventor. I use a Webviewer
to load a JavaScript code (see below) that displays, in a table, the content of a database stored in TinyDB
.
So basically I have a table that looks like that:
I've tried to make the content of my table editable by adding this at the bottom of my script but without success: my table disappears.
<script>
function myFunction() {
document.getElementById("myTable").contentEditable = true;
}
</script>
Also I've also seen this page. But I can't find way to implement this .js
in my App Inventor app.
Any idea how to make this work?
<body>
<div id="myTable"></div>
<script>
// get the table to display from the window.AppInventor object and split at new line
var urlArray = window.AppInventor.getWebViewString().split("\n");
var doc = document;
var fragment = doc.createDocumentFragment();
for(i=0;i<urlArray.length;i++){
var tr = doc.createElement("tr");
// split at comma
var rowArray = urlArray[i].split("|");
for(j=0;j<rowArray.length;j++){
if ( i == 0) { var td = doc.createElement("th"); }
else { var td = doc.createElement("td"); }
td.innerHTML = rowArray[j];
tr.appendChild(td);
fragment.appendChild(tr);
}
}
var table = doc.createElement("table");
table.appendChild(fragment);
doc.getElementById("myTable").appendChild(table);
</script>
</body>