📜  p5.js 表格 removeColumn() 方法

📅  最后修改于: 2022-05-13 01:56:51.702000             🧑  作者: Mango

p5.js 表格 removeColumn() 方法

p5.js 中 p5.Table 的removeColumn() 方法用于从表中删除给定的列。可以通过使用其标题或索引值(列 ID)来指定要删除的列。

句法:

removeColumn( column )

参数:此函数接受如上所述和如下所述的单个参数:

  • column:它是一个字符串或数字,表示要删除的列名或列 ID。

下面的示例说明了 p5.js 中的removeColumn()函数

示例 1:

function setup() {
    createCanvas(500, 400);
    textSize(16);
  
    removeColBtn =
        createButton("Clear Last Column");
  
    removeColBtn.position(30, 60);
    removeColBtn.mouseClicked(clearLastColumn);
  
    // Create the table
    table = new p5.Table();
  
    // Add columns
    table.addColumn("author");
    table.addColumn("book");
    table.addColumn("price");
    table.addColumn("rating");
  
    // Add 10 random rows to the table
    for (let i = 0; i < 10; i++) {
        let newRow = table.addRow();
        newRow.setString("author",
            "Author " + floor(random(1, 100)));
        newRow.setString("book",
            "Book " + floor(random(1, 100)));
        newRow.setString("price",
            "$" + floor(random(10, 100)));
        newRow.setString("rating",
            random(1, 5).toFixed(2));
    }
  
    // Display the rows currently present
    getTableRows();
}
  
function clearLastColumn() {
    clear();
    text("Click on the button to clear "
        + "the last column in the table",
        20, 20);
  
    // Get the index of the last column
    // of the table
    let lastColumn =
        table.getColumnCount() - 1;
  
    // Use the removeColumn() method to
    // clear the given column of the table
    if (lastColumn >= 0)
        table.removeColumn(lastColumn);
  
    text("Last column cleared!", 20, 140);
    getTableRows();
}
  
function getTableRows() {
    clear();
    text("Click on the button to clear "
        + "the last column in the table",
        20, 20);
  
    // Display the total columns
    // present in the table
    text("There are " +
        table.getColumnCount() +
        " columns in the table", 20, 120);
  
    // Show the table with the columns and 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, 140 + r * 20);
}

输出:
removeCol-last

示例 2:

function setup() {
  createCanvas(500, 400);
  textSize(16);
   
  columnInput = createInput();
  columnInput.position(30, 40);
   
  clearColBtn =
    createButton("Clear Given Column");
  clearColBtn.position(30, 70);
  clearColBtn.mouseClicked(clearColumn);
   
  // Create the table
  table = new p5.Table();
   
  // Add columns
  table.addColumn("author");
  table.addColumn("book");
  table.addColumn("price");
  table.addColumn("rating");
   
  // Add 10 random rows to the table
  for (let i = 0; i < 10; i++) {
    let newRow = table.addRow();
    newRow.setString("author",
      "Author " + floor(random(1, 100)));
    newRow.setString("book",
      "Book " + floor(random(1, 100)));
    newRow.setString("price",
      "$" + floor(random(10, 100)));
    newRow.setString("rating",
       random(1, 5).toFixed(2));
  }
   
  // Display the rows currently present
  getTableRows();
}
   
function clearColumn() {
  clear();
  text("Click on the button to clear "
     + "the given column in the table",
    20, 20);
   
  // Get the index of the column to be removed
  let colToClear =
    int(columnInput.value());
   
  // Use the removeColumn() method to
  // clear the given column of the table
  if (colToClear >= 0 &&
      colToClear < table.getColumnCount())
    table.removeColumn(colToClear);
   
  text("Last column cleared!", 20, 140);
  getTableRows();
}
   
function getTableRows() {
  clear();
  text("Click on the button to clear "
    + "the given column in the table",
    20, 20);
   
  // Display the total columns 
  // present in the table
  text("There are " + 
    table.getColumnCount() + 
    " columns 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);
}

输出:
removeCol 指定

在线编辑器: https://editor.p5js.org/

环境设置: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考: https://p5js.org/reference/#/p5.Table/removeColumn