p5.js Table addRow()用法及代碼示例

p5.js中p5.Table的addRow()方法用於將新數據行添加到表對象。默認情況下，此方法創建一個空行。通過存儲對新行對象的引用，然後使用set()方法在行中設置值，可以使用此函數。或者，可以將p5.TableRow對象作為該方法的參數。這將直接複製給定的行並將其添加到表中。

用法:

addRow( [row] )

參數：該函數接受如上所述和以下描述的單個參數：

row:它是一個p5.TableRow對象，它指定要添加到表中的行。它是一個可選參數。

以下示例說明了p5.js中的addRow()函數：

範例1：

javascript

function setup() { 
  createCanvas(500, 300); 
  textSize(16); 
  
  addRowBtn = createButton("Add Row"); 
  addRowBtn.position(30, 40); 
  addRowBtn.mouseClicked(addNewRow); 
  
  // Create the table 
  table = new p5.Table(); 
  
  table.addColumn("author"); 
  table.addColumn("langauge"); 
} 
  
function addNewRow() { 
  // Create new row object 
  let newRow = table.addRow(); 
  
  // Add data to it using setString() 
  newRow.setString("author", "Author " + floor(random(1, 100))); 
  newRow.setString("langauge", "Langauge " + floor(random(1, 100))); 
} 
  
function draw() { 
  clear(); 
  
  // Show the total number of rows 
  text("The table has " + table.getRowCount() + " rows", 20, 20); 
  
  // Show the columns 
  text("Author", 20, 80); 
  text("Language", 120, 80); 
  
  // Show the table with the rows 
  for (let r = 0; r < table.getRowCount(); r++) 
    for (let c = 0; c < table.getColumnCount(); c++) 
      text(table.getString(r, c), 20 + c * 100, 120 + r * 20); 
}

輸出：

addRow-1

範例2：

javascript

function setup() { 
  createCanvas(500, 300); 
  textSize(16); 
  
  addRowBtn = createButton("Add Row"); 
  addRowBtn.position(30, 40); 
  addRowBtn.mouseClicked(addNewRow); 
  
  // Create the table 
  table = new p5.Table(); 
  
  table.addColumn("author"); 
  table.addColumn("book"); 
  
} 
  
function addNewRow() { 
  
  // Create a new TableRow object 
  let tableRow = new p5.TableRow("Author X, Book Y", ","); 
  
  // Add the TableRow to table 
  table.addRow(tableRow); 
} 
  
function draw() { 
  clear(); 
  
  // Show the total number of rows 
  text("The table has " + table.getRowCount() + " rows", 20, 20); 
    
  // Show the columns 
  text("Author", 20, 80); 
  text("Book", 120, 80); 
  
  // Show the table with the rows 
  for (let r = 0; r < table.getRowCount(); r++) 
    for (let c = 0; c < table.getColumnCount(); c++) 
      text(table.getString(r, c), 20 + c * 100, 120 + r * 20); 
}

輸出：

addRow-2

在線編輯： https://editor.p5js.org/
環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
參考： https://p5js.org/reference/#/p5.Table/addRow

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.Table addRow() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。