當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

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

p5.j​​s中p5.Table的findRows()方法用於查找包含給定和值的所有行，並返回對這些行的引用。可以將方法搜索的列指定為參數。

用法:

findRows( value, column )

參數：此函數接受上述和以下描述的兩個參數：

  • value:它是一個字符串，它指定必須匹配的值。
  • column:它是一個字符串或數字，表示要搜索的列的列名或列ID。

下麵的示例說明了p5.js中的findRows()方法：

範例1：



function setup() { 
  createCanvas(500, 300); 
  textSize(16); 
  
  findQueryInput = createInput(); 
  findQueryInput.position(30, 50); 
  
  getColBtn = 
    createButton("Get the matching rows"); 
  getColBtn.position(30, 80); 
  getColBtn.mouseClicked(getFindResults); 
  
  // Create the table 
  table = new p5.Table(); 
  
  // Add two columns 
  table.addColumn("fruit"); 
  table.addColumn("price"); 
  
  // Add some rows to the table 
  let newRow = table.addRow(); 
  newRow.setString("fruit", "Apple"); 
  newRow.setString("price", 100); 
  
  newRow = table.addRow(); 
  newRow.setString("fruit", "Banana"); 
  newRow.setString("price", 230); 
  
  newRow = table.addRow(); 
  newRow.setString("fruit", "Grapes"); 
  newRow.setString("price", 50); 
  
  newRow = table.addRow(); 
  newRow.setString("fruit", "Apple"); 
  newRow.setString("price", 45); 
  
  newRow = table.addRow(); 
  newRow.setString("fruit", "Apple"); 
  newRow.setString("price", 65); 
  
  showTable(); 
} 
  
function getFindResults() { 
  clear(); 
  
  let findQuery = findQueryInput.value(); 
  
  // Get the row values using findRows() 
  if (findQuery != "") { 
  
    // Find the results in the column of 'fruit'  
    findResults = 
      table.findRows(findQuery, 'fruit'); 
  
    if (findResults.length > 0) { 
      text("The rows that match the query are", 
           20, 120); 
  
      // Display the matched rows 
      for (let i = 0; i < findResults.length; i++) { 
          
        text(findResults[i].arr[0], 
             20, 140 + i * 20); 
        text(findResults[i].arr[1], 
             120, 140 + i * 20); 
      } 
    } 
    else text("No Results Found", 20, 120);  
      
  } else
    text("The query string is empty", 20, 120); 
  
    text("Enter a string to find it" + 
         " in the table", 20, 20); 
} 
  
function showTable() { 
  clear(); 
  
  // Display the total rows 
  // present in the table 
  text("There are " + 
       table.getRowCount() + 
       " rows in the table", 20, 120); 
  
  for (let r = 0; r < table.getRowCount(); r++) 
    for (let c = 0; c < table.getColumnCount(); c++) 
      text(table.getString(r, c), 
           20 + c * 100, 140 + r * 20); 
  
      text("Enter a string to find it" + 
           " in the table", 20, 20); 
}

輸出：

findRows-ex1

範例2：

function setup() { 
  createCanvas(500, 300); 
  textSize(16); 
  
  findQueryInput = createInput(); 
  findQueryInput.position(30, 50); 
  
  getColBtn =  
    createButton("Get the matching rows"); 
  getColBtn.position(30, 80); 
  getColBtn.mouseClicked(getFindResults); 
  
  // Create the table 
  table = new p5.Table(); 
  
  // Add two columns 
  table.addColumn("fruit"); 
  table.addColumn("price"); 
  
  // Add some rows to the table 
  let newRow = table.addRow(); 
  newRow.setString("fruit", "Apple"); 
  newRow.setString("price", 100); 
  
  newRow = table.addRow(); 
  newRow.setString("fruit", "Banana"); 
  newRow.setString("price", 100); 
  
  newRow = table.addRow(); 
  newRow.setString("fruit", "Grapes"); 
  newRow.setString("price", 100); 
  
  newRow = table.addRow(); 
  newRow.setString("fruit", "Apple"); 
  newRow.setString("price", 50); 
  
  newRow = table.addRow(); 
  newRow.setString("fruit", "Apple"); 
  newRow.setString("price", 65); 
  
  showTable(); 
} 
  
function getFindResults() { 
  clear(); 
  
  let findQuery = 
      findQueryInput.value(); 
  
  // Get the row values using findRows() 
  if (findQuery != "") { 
  
    // Find the results in the column of 'price'  
    findResults = 
      table.findRows(findQuery, 'price'); 
  
    if (findResults.length > 0) { 
      text("The rows that match the query are", 
           20, 120); 
  
      // Display the matched rows 
      for (let i = 0; i < findResults.length; i++) { 
          
        text(findResults[i].arr[0], 
             20, 140 + i * 20); 
        text(findResults[i].arr[1], 
             120, 140 + i * 20); 
      } 
    } 
    else text("No Results Found", 20, 120); 
      
  } else
    text("The query string is empty", 20, 120); 
  
  text("Enter a string to find it" +  
       " in the table", 20, 20); 
} 
  
function showTable() { 
  clear(); 
  
  // Display the total rows 
  // present in the table 
  text("There are " + 
       table.getRowCount() + 
       " rows in the table", 
       20, 120); 
  
  for (let r = 0; r < table.getRowCount(); r++) 
    for (let c = 0; c < table.getColumnCount(); c++) 
      text(table.getString(r, c), 
           20 + c * 100, 
           140 + r * 20); 
  
  text("Enter a string to find it" +  
       " in the table", 20, 20); 
}

輸出：

findRows-ex2

在線編輯： https://editor.p5js.org/

環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

參考： https://p5js.org/reference/#/p5.Table/findRows




相關用法


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