HTML DOM console.table（）メソッド
HTML DOMのconsole.table（）メソッドは、データを適切に整理された表形式で表示するために使用されます。このメソッドは、複雑な配列またはオブジェクトを視覚化するために使用できます。テーブルは、配列内の各要素がテーブル内の行になるように編成されています。 tabledata（必須）とtablecolumns（オプション）の2つのパラメーターを取ります。
構文
以下は、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> 出力
これにより、次の出力が生成されます-
[テーブル]ボタンをクリックして、コンソールタブで表示すると-
上記の例では-
最初に、ユーザーがクリックするとcreateTable（）関数を実行するボタンテーブルを作成しました。
<button type="button" onclick="createTable()">TABLE</button>
createTable（）メソッドには、その中に作成されたオブジェクトの3つの配列があります。オブジェクトの配列には、それぞれfruit1、fruit2、fruit3という名前が付けられています。次に、オブジェクトの配列の名前が最初のパラメーター（tableData）としてコンソールのtable（）メソッドに渡されます。
2番目のオプションのパラメーターでは、列の名前を配列として渡し、テーブルに含めます。 「名前」と「価格」の列を指定したので、これらの列はテーブルに表示され、「色」の列はありません-
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"]);
} -
HTML DOMテーブルcreateTFoot（）メソッド
HTML DOMテーブルのcreateTFoot（）メソッドは、空の要素を生成し、それをHTMLドキュメントのテーブルに追加します。 構文 以下は構文です- object.createTFoot() HTML DOMテーブルcreateTFoot（）メソッドの例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { color: #000; background: lightblue; &
-
HTML DOMテーブルcreateCaption（）メソッド
HTML DOMテーブルのcreateCaption（）メソッドは、空の要素を生成し、それをHTMLドキュメントのテーブルに追加します。 構文 以下は構文です- object.createCaption() HTML DOMテーブルのcreateCaption（）メソッドの例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { color: #000; background: lightblue; &