Sie sind auf Seite 1von 4

(./index.

php) App Inventor and


HTML/JavaScript with Input Parameters
App Inventor and Dynamic Table Layout
This is the App Inventor example, it also is available for App Inventor Classic here (./table2.php).
Thank you Christopher for being the sponsor of the App Inventor 2 version!
It was asked in the App Inventor Forum (https://groups.google.com/d/topic/programming-with-app-
inventor/zopD9HkBnWA/discussion), how to display a table in App Inventor without knowing how many rows will be supplied.
And let me add to this requirement, without knowing how many columns will be supplied!
App Inventor together with embedded HTML/JavaScript can do that!
Thank you Craig! (http://stackoverflow.com/users/525558/craig) Your JavaScript example
(http://stackoverflow.com/questions/8749236/create-table-with-jquery-append) helped me to set up this solution.
You can use this example for your projects without need to adjust anything in the HTML document. And: it works with any desired
number of rows and/or columns! Well, if you do not like the colors etc., there are lots of possibilities you can adjust with CSS
(http://www.w3schools.com/css/css_table.asp) in the header of the HTML document.
App Inventor Blocks
Download the html file
The HTML file table.html will be downloaded on first run of the app and stored on the sd card of the device using a modified version
of the Webprefetch File by File (filebyfile.php) example.
Display the table
We pass the urlencoded (http://en.wikipedia.org/wiki/Urlencode) table in csv format as parameter to the html file and use a
webviewer component to display it. That's all...
Screenshot
Pura Vida Apps (index.php) Apps (apps.php) Snippets (snippets.php)
Tutorials (tutorials.php) News (news.php) Forums (forum.php)
Links (links.php) Search (search.php) Contact (contact.php)
HTML/JavaScript
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Table Layout</title>
<!--more layout possibilities see here: http://www.w3schools.com/css/css_table.asp (http://www.w3schools.com/css/css_table.asp)-->
<style type="text/css">
table { border-collapse:collapse; }
table,th,td { border:1px solid green; }
th { background-color:green; color:white; }
</style>
<script>
function urldecode(str) {
return decodeURIComponent((str+'').replace(/\+/g, '%20'));
}
</script>
</head>
<body>
<div id="myTable"></div>
<script>
// split at new line
var urlArray = location.search.slice(1).split("%0A");
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("%2C");
for(j=0;j<rowArray.length;j++){
if ( i == 0) { var td = doc.createElement("th"); }
else { var td = doc.createElement("td"); }
td.innerHTML = urldecode(rowArray[j]);
tr.appendChild(td);
fragment.appendChild(tr);
}
}
var table = doc.createElement("table");
table.appendChild(fragment);
doc.getElementById("myTable").appendChild(table);
</script>
</body>
</html>
Note
The limit to display a table is around 2 MB (max. length of an URI) (http://stackoverflow.com/a/417184/1545993).
Questions and Answers
Q1: How would you use this example and populate it with a list of lists?
A: So your question is: how to convert a list of lists into a table in csv format? This is very easy: just use the list to csv table
(http://appinventor.mit.edu/explore/content/list-blocks.html#list%20to%20csv%20table) block for that.
Download
Home (./index.php) | Apps (./apps.php) | Snippets (./snippets.php) | Tutorials (./tutorials.php) | News (./news.php) | Forums (./forum.php) |
Links (./links.php) | Search (./search.php) | Contact (./contact.php)
Site Content 2014 Pura Vida Apps (http://puravidaapps.com) using the Foundation Framework (http://foundation.zurb.com/).
Portions of this page are modifications based on work created and shared by Google (http://code.google.com/policies.html) and used according to
terms described in the Creative Commons 3.0 Attribution License. (http://creativecommons.org/licenses/by/3.0/) Android is a trademark of Google
Inc.
If you find this example helpful and you are using it in one of your projects,
be nice and donate a small amount!

Thank you! Taifun

Download aia file for App Inventor (sourceforge.php?name=table.aia)
Back to top of page ...
(http://creativecommons.org/licenses/by-sa/3.0/)
This work by Pura Vida Apps (http://puravidaapps.com) is licensed under a Creative Commons Attribution-ShareAlike 3.0
Unported License (http://creativecommons.org/licenses/by-sa/3.0/)
with attribution (name=Pura Vida Apps (http://puravidaapps.com) and link to the source site) required.