How to add a table row with p5.js?
1 answer
@darion
To add a table row in p5.js, you can use the createElement() function to create a new tr (table row) element and append it to the existing table in your HTML document. Here's an example code snippet to demonstrate how to add a table row using p5.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
let table;
function setup() {
createCanvas(400, 400);
// Create a table element and add it to the HTML document
table = createTable();
table.id('myTable');
table.parent('canvas-container');
// Add a header row to the table
let header = table.addRow();
header.addCell('Name');
header.addCell('Age');
header.addCell('City');
// Add a button to add a new row
let addButton = createButton('Add Row');
addButton.mousePressed(addTableRow);
addButton.parent('canvas-container');
}
function addTableRow() {
// Get a reference to the table
let t = select('#myTable');
// Create a new table row and add it to the table
let row = t.addRow();
row.addCell('John');
row.addCell('25');
row.addCell('New York');
}
|
In this code snippet, we first create a table element using the createTable() function and add it to the HTML document. We then add a header row with column names 'Name', 'Age', and 'City'. We also create a button that, when clicked, will call the addTableRow() function to add a new row to the table with the values 'John', '25', and 'New York'.
Note that this code assumes you have an HTML element with the id 'canvas-container' in your HTML document where the table and the button will be appended.