p5.js TableRow setString()用法及代碼示例

p5.js中p5.TableRow的setString()方法用於將給定的String值存儲到表行的給定列。可以通過列ID或列名指定該列。

用法:

setString( column, value )

參數：此方法接受上麵提到和下麵描述的兩個參數：

column:它是一個字符串或數字，表示列的名稱或列的ID。
value:它是一個字符串，它指定必須存儲的值。

以下示例說明了p5.js中的setString()方法：示例1：

javascript

function setup() { 
  createCanvas(500, 300); 
  textSize(18); 
  
  text("Click the button to modify the table", 
       20, 20); 
  
  setBtn = 
    createButton("Change Status"); 
  setBtn.position(30, 60); 
  setBtn.mouseClicked(modifyTableData); 
  
  // Create the table 
  table = new p5.Table(); 
  
  // Add the columns and rows 
  table.addColumn("destination"); 
  table.addColumn("visited"); 
  
  // Add information to each column 
  // using the setString() method 
  let row = table.addRow(); 
  row.setString("destination", 
                "Japan"); 
  row.setString("visited", "Yes"); 
  
  row = table.addRow(); 
  row.setString("destination", 
                "Malaysia"); 
  row.setString("visited", "No"); 
  
  row = table.addRow(); 
  row.setString("destination", 
                "Switzerland"); 
  row.setString("visited", "No"); 
  
  row = table.addRow(); 
  row.setString("destination", 
                "Venice"); 
  row.setString("visited", "No"); 
  
  showTable(); 
} 
  
function modifyTableData() { 
  // Loop through all the rows 
  // in the table 
  for (let r = 0; r < table.getRowCount(); r++) { 
  
    // Get a row from the table 
    let tableRow = table.rows[r]; 
  
    // Change the string of the visited 
    // column of the table row 
    if (tableRow.getString("visited") == "No") 
      tableRow.setString("visited", "Yes"); 
  } 
  
  showTable(); 
} 
  
function showTable() { 
  clear(); 
  text("The value is modified using the " + 
       "setString() method", 20, 20); 
  
  // Show all the columns present 
  for (let c = 0; c < 2; c++) { 
    text(table.columns, 20 + 160 * c, 110); 
  } 
  
  // Show all the rows currently 
  // present in the table 
  for (let r = 0; r < table.getRowCount(); r++) { 
    for (let c = 0; c < 2; c++) { 
      text(table.getString(r, c), 
           20 + 160 * c, 140 + 20 * r); 
    } 
  } 
}

輸出：

範例2：

javascript

function setup() { 
  createCanvas(500, 300); 
  textSize(18); 
  
  setBtn = createButton("Toggle Strings"); 
  setBtn.position(30, 40); 
  setBtn.mouseClicked(modifyTableData); 
  
  // Create the table 
  table = new p5.Table(); 
  
  for (let i = 0; i < 10; i++) { 
    table.addColumn(); 
    table.addRow(); 
  } 
  
  createTable(); 
} 
  
function createTable() { 
  
  // Loop through all the rows and columns 
  // in the table and set their initial values 
  for (let r = 0; r < table.getRowCount(); r++) { 
    for (let c = 0; c < table.getColumnCount(); c++) { 
  
      // Get a row from the table 
      let tableRow = table.rows[r]; 
  
      if ((r + c) % 3 == 0) 
  
        // Set the column to the given value  
        tableRow.setString(c, "*"); 
      else
  
        // Set the column to the given value  
        tableRow.setString(c, "~"); 
    } 
  } 
  
  showTable(); 
} 
  
function modifyTableData() { 
  // Loop through all the rows and columns 
  // in the table and change their values 
  // depending on the previous string 
  for (let r = 0; r < table.getRowCount(); r++) { 
    for (let c = 0; c < table.getColumnCount(); c++) { 
  
      // Get a row from the table 
      let tableRow = table.rows[r]; 
  
      if (tableRow.getString(c) == "~") 
  
        // Set the column to the given value  
        tableRow.setString(c, "*"); 
      else
  
        // Set the column to the given value  
        tableRow.setString(c, "~"); 
    } 
  } 
  
  showTable(); 
} 
  
function showTable() { 
  clear(); 
  text("The value is modified using the " + 
       "setString() method", 20, 20); 
  
  // Show all the rows currently 
  // present in the table 
  for (let r = 0; r < table.getRowCount(); r++) { 
    for (let c = 0; c < table.getColumnCount(); c++) { 
      text(table.getString(r, c), 
           20 + 40 * c, 80 + 20 * r); 
    } 
  } 
}

輸出：

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

相關用法

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