HTML DOM console.table()用法及代碼示例

HTML DOM console.table() 方法用於以組織良好的表格格式顯示數據。此方法可用於可視化複雜的數組或對象。表格的組織方式使得數組中的每個元素都是表格中的一行。它需要兩個參數 tabledata(強製)和 tablecolumns(可選)。

用法

以下是 console.table() 方法的語法 -

console.table( tabledata, tablecolumns );

在這裏 -

Tabledata 是一個強製參數值。它表示用於填充表格的數據。它可以是對象或數組類型。
Tablecolumns 是一個可選參數值。它是一個數組參數，用於指定應在表中顯示哪些列。

示例

讓我們看一個 HTML DOM console.table() 方法的例子 -

<!DOCTYPE html>
<html>
<body>
<h1>console.table() Method</h1>
<p>Click on the below button to create a console table</p>
<button type="button" onclick="createTable()">TABLE</button>
<script>
   function createTable(){
      var fruit1 = { Name:"Mango", price:"100", color:"Yellow" }
      var fruit2 = { Name:"Guava", price:"50", color:"Green" }
      var fruit3 = { Name:"Strawberry", price:"150", color:"Red" }
      console.table([fruit1, fruit2, fruit3], ["Name","price"]);
   }
</script>
<p>View the table in the console tab</p>
</script>
</body>
</html>

輸出

這將產生以下輸出 -

單擊 TABLE 按鈕並在控製台選項卡中查看它 -

在上麵的例子中 -

我們首先創建了一個按鈕表，在用戶單擊時將執行 createTable() 函數。

<button type="button" onclick="createTable()">TABLE</button>

createTable() 方法在其中創建了三個對象數組。對象數組分別命名為fruit1、fruit2 和fruit3。然後將對象數組的名稱作為第一個參數(tableData)傳遞給控製台的 table() 方法。

在第二個可選參數中，我們將列的名稱作為數組傳遞，我們希望包含在表中。由於我們已經指定了 “Name” 和 “price” 列；這些列將在表中看到，並且不會有 “color” 列 -

function createTable(){
   var fruit1 = { Name:"Mango", price:"100", color:"Yellow" }
   var fruit2 = { Name:"Guava", price:"50", color:"Green" }
   var fruit3 = { Name:"Strawberry", price:"150", color:"Red" }
   console.table([fruit1, fruit2, fruit3], ["Name","price"]);
}

相關用法

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