如何使用plunker显示动物表 [英] How do I use plunker to display the animals table

问题描述

我如何使用plunker来显示动物表，如果我因为某种原因在plunker中运行此js代码，动物表将不会显示。



< pre lang =Javascript> var func1 = function （）{
func2（）;
};
var Car = function （）{
this .funcX = function （）{
this .funcY （）;
}
此 .funcY = 功能（）{
< span class =code-keyword> this .funcZ（）;
}
}
var car = new Car（）;


console .log（car）;

var animals = [
{animal：' Horse'，name：' Henry'，年龄： 43 }，
{animal：' 狗'，名称：' Fred'，年龄： 13 }，
{animal：' Cat'，名称：' Frodo'，年龄： 18 }
];
console .table（animals）;

我尝试过：



Plunker [ ^ ]

解决方案

console.table 将以表格形式打印在浏览器开发者工具的控制台上，按 F12 在页面然后刷新页面，你和开发工具栏导航到控制台，你会看到以表格形式记录的数据。



你将需要先添加一些html，然后使用javascript添加行数据如下：

 <  表    id   =  animalstable >  
 <   thead  >  
 <   tr  >  <   td  > 动物<   / td  >  
 <   td  > 名称<   / td  >  
 <   td  > 年龄<   / td  >  
 <   / tr  >  <   / thead  >  
 <   / table  >  

然后在js文件中添加如下代码：

 < span class =code-sdkkeyword> document  .addEventListener（'  DOMContentLoaded'，< span class =code-keyword> function （）{
 
  var  animals = [{
 animal： '  Horse'，
 name：' 亨利'，
年龄： 43  
}，{
 animal：< span class =code-string>'  Dog'，
 name：'  Fred'，
 age： 13  
}，{
 animal：'  Cat'，
 name：'  Frodo'，
年龄： 18  
}] ; 
  console  .log（animals）; 
  var  table =  document  .getElementById（   animalstable）; 
  for （ var  index  in 动物）{
  console  .log（index）; 
 table.innerHTML + =   + animals [index] .animal +   + animals [index] .name +   + animals [index] .age +  < /跨度>; 
} 
 
}， false ）; 

请参阅更新的此处的Plunker演示

How do i use plunker to display the animals table, if i run this js code in plunker for some reason the animal table will not be displayed.

var func1 = function(){
	func2();		
};
var Car = function(){
	this.funcX = function(){
		this.funcY();
	}
	this.funcY = function(){
		this.funcZ();
	}
}
var car = new Car();


console.log(car);

var animals = [
 { animal: 'Horse', name: 'Henry', age: 43 },
 { animal: 'Dog', name: 'Fred', age: 13 },
 { animal: 'Cat', name: 'Frodo', age: 18 }
];
console.table(animals);

What I have tried:

Plunker[^]

解决方案

console.table will print in tablular form on the console of the browser developer tools, for that press F12 in the page and then refresh the page, you and from the dev tool bar navigate to console, you will see the data logged in tabular form then.

you will need to add some html first and then using javascript add the rows with data like:

<table id="animalstable">
      <thead>
        <tr><td>Animal</td>
        <td>Name</td>
        <td>Age</td>
      </tr></thead>
</table>

and then in js file add code like:

document.addEventListener('DOMContentLoaded', function() {

  var animals = [{
    animal: 'Horse',
    name: 'Henry',
    age: 43
  }, {
    animal: 'Dog',
    name: 'Fred',
    age: 13
  }, {
    animal: 'Cat',
    name: 'Frodo',
    age: 18
  }];
  console.log(animals);
  var table = document.getElementById("animalstable");
  for (var index in animals) {
    console.log(index);
    table.innerHTML += "" + animals[index].animal + "" + animals[index].name + "" + animals[index].age + "";
  }

}, false);

See the updated Plunker demo here

这篇关于如何使用plunker显示动物表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！