Creating a table on the fly

If you look at the HTML source code of "adafruit_remote.html" near the very bottom you will see the following HTML code defining a table called "RemoteTable". You will notice that this table is empty. However when it is displayed, it contains rows and columns of buttons for your remote. Where do the buttons come from? The answer is we create them using JavaScript. Here is the section of the HTML code.

Download: file
<table id="RemoteTable">
</table>
<script>myInitialize(); </script>

This table definition is followed by a script command to call "myInitialize()". That is a JavaScript function that initializes various JavaScript variables and particularly cause a function called "ShowRemote()" which takes the data from the variable "Buttons" near the top of the page and converts it into rows and columns of the table. It uses JavaScript commands such as "innerHTML" and "appendChild(...)" to insert HTML tags into your webpage as it is loaded. Each cell of the table contains a parameter "onclick='DoButton(r,c)" so that when you click on that particular button it calls the JavaScript function "DoButton(r,c)" with the row and column number of the button which you clicked. It in turn calls SendButton which extracts the data from the Buttons structure and puts together the information to be sent to your Arduino device.

The Arduino sketch implements something called a REST API interface. We will discuss that in the following sections.

This guide was first published on Mar 12, 2018. It was last updated on Mar 12, 2018. This page (Creating a table on the fly) was last updated on Aug 24, 2019.