定义和用法
console.table() 方法用于在控制台输出表格信息。
第一个参数是必需的，且对象类型需要是对象或数组，对应的数据会填充到表格中。
提示: 在测试该方法的过程中，控制台需要可见 (浏览器按下 F12 打开控制台)。
语法
console.table(tabledata, tablecolumns)所有主要浏览器都支持DOM console.table() 方法
参数说明
| 参数 | 类型 | 描述 |
|---|---|---|
| tabledata | Array 或 Object | 必需，填充到表格中的数据。 |
| tablecolumns | Array | 可选，一个数组，表格标题栏的名称。 |
实例
DEMO1：在控制台输出一个表格。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web176教程(Web176.com)</title> </head> <body> <h1>JavaScript console.table() 方法</h1> <p>按下 F12 查看控制台信息。</p> <p>如果你没看到表格，请刷新浏览器。</p> <p>请保持控制台是可见的。</p> <script> console.table(["Google", "Web176", "Taobao"]); </script> <p><strong>提示:</strong> 点击标题栏，可以对对应的列进行排序。</p> </body> </html>
DEMO2：使用对象作为输出的信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
</head>
<body>
<h1>JavaScript console.table() 方法</h1>
<p>按下 F12 查看控制台信息。</p>
<p>如果你没看到表格，请刷新浏览器。</p>
<p>请保持控制台是可见的。</p>
<p>该实例演示如何使用对象作为填充表格的数据。</p>
<script>
console.table({ name : "Web176教程", site : "www.web176.com" });
</script>
</body>
</html>DEMO3：使用对象数组。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
</head>
<body>
<h1>JavaScript console.table() 方法</h1>
<p>按下 F12 查看控制台信息。</p>
<p>如果你没看到表格，请刷新浏览器。</p>
<p>请保持控制台是可见的。</p>
<p>该实例演示如何使用对象数组作为填充表格的数据。</p>
<script>
var site1 = { name : "Web176教程", site : "www.web176.com" }
var site2 = { name : "Google", site : "www.google.com" }
var site3 = { name : "Taobao", site : "www.taobao.com" }
console.table([site1, site2, site3]);
</script>
</body>
</html>DEMO4：指定表格表头标题名，参数只能是对应的键名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(Web176.com)</title>
</head>
<body>
<h1>JavaScript console.table() 方法</h1>
<p>按下 F12 查看控制台信息。</p>
<p>如果你没看到表格，请刷新浏览器。</p>
<p>请保持控制台是可见的。</p>
<p>该实例演示如何使用对象数组作为填充表格的数据，且设置表头的标题。</p>
<script>
var site1 = { name : "Web176教程", site : "www.web176.com" }
var site2 = { name : "Google", site : "www.google.com" }
var site3 = { name : "Taobao", site : "www.taobao.com" }
console.table([site1, site2, site3], ["site"]);
</script>
</body>
</html>作者：terry，如若转载，请注明出处：https://www.web176.com/javascriptbook/domtips/3836.html
支付宝 
微信 