HTML DOM console.table() 方法 | Console 对象

返回到:DOM 对象:Console 对象

定义和用法

console.table() 方法用于在控制台输出表格信息。

第一个参数是必需的,且对象类型需要是对象或数组,对应的数据会填充到表格中。

提示: 在测试该方法的过程中,控制台需要可见 (浏览器按下 F12 打开控制台)。

语法

console.table(tabledata, tablecolumns)

所有主要浏览器都支持DOM console.table() 方法

参数说明

参数类型描述
tabledataArray 或 Object必需,填充到表格中的数据。
tablecolumnsArray可选,一个数组,表格标题栏的名称。

实例

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

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年9月24日 上午10:50
下一篇 2021年9月24日 上午11:00

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注