How to add a table row with p5.js?

Member

by darion , in category: Javascript , 19 days ago

How to add a table row with p5.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by brandy , 18 days ago

@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.