将表头和对象属性值的对象属性添加到表行

Question

我有一个html表。只有当鼠标位于指定对象上时，我才设法显示表格。例如，当它超过狗对象时，它将显示狗的名字。当鼠标悬在猫的上方时，我也喜欢猫的年龄，用几句话我想用不同的对象属性填充表格，具体取决于鼠标的位置。这是我的表：

   //this is how I would like my table to be
   <table class="featureInfo">
    <tr>
    //fill the th with the object properties
      <th>object propertie1</th>
      <th >object propertie2</th>
      <th >object propertie3</th>
      <th >object propertie4</th>
      <th >object propertie5</th>
      <th >object propertie6</th>
    </tr>

  <tr>
      <td>object propertie1 value</td>    
      <td>object propertie2 value</td>
      <td>object propertie3 value</td>
      <td>object propertie4 value</td>
  </tr>
  <tr class="odd">
      <td>object propertie1 value</td>    
      <td>object propertie2 value</td>
      <td>object propertie3 value</td>
      <td>object propertie4 value</td>
  </tr>
</table>

现在让我们说我有这些对象：

function Human() {
    this.id = 1; 
    this.firstName = "Human";
    this.lastName = "Last Name";
    this.eyecolor = "yellow";
    this.height = "1.94m";
}

function Dog() {
    this.id = 2;
    this.firstName = "Dog";
    this.lastName = "Last Name";
    this.hairy = "yes";
    this.legs = "4";
    this.weight = "20kg";
}

function Cat() {
    this.id = 3;
    this.firstName = "Cat";
    this.lastName = "Last Name";
    this.age = 5;
    this.friendly = "no";

var human = new Human();
var dog = new Dog();
var cat = new Cat(); 

这是我设法实现的JavaScript：

//lets suppose obj is an xaml file with arrays full of objects
var tbody = document.getElementById('tbody');
for (var i = 0; i < Object.keys(obj).length; i++) {
    var tr = "<tr>";
    if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) obj[i].value += "0";

    tr += "<td>" + obj[i].key + "</td>" + "<td>$" + obj[i].value.toString() + "</td></tr>";
    tbody.innerHTML += tr;
}

我的属性对于每个对象都是不同的。谁可以指导我朝正确的方向？谢谢:)）

Answer 1

要获得预期结果，请使用以下选项显示列并显示可用值

构建表所需的twoloops

1. 标题
2. 用于构建来自Human，Dog，Cat Objects的行

function Human() {
    this.id = 1; 
    this.firstName = "Human";
    this.lastName = "Last Name";
    this.eyecolor = "yellow";
    this.height = "1.94m";
}

function Dog() {
    this.id = 2;
    this.firstName = "Dog";
    this.lastName = "Last Name";
    this.hairy = "yes";
    this.legs = "4";
    this.weight = "20kg";
}

function Cat() {
    this.id = 3;
    this.firstName = "Cat";
    this.lastName = "Last Name";
    this.age = 5;
    this.friendly = "no";
}

var human = new Human();
var dog = new Dog();
var cat = new Cat(); 

var tbody = document.getElementById('tbody');

var Obj = [];

Obj.push(human)
Obj.push(dog)
Obj.push(cat)

var txt ='<tr>';

var headers = []
//headers with all keys including duplicates  
for(y in Obj){
  headers = headers.concat(Object.keys(Obj[y]))
  }
//remove duplicates from headers
headers = headers.filter(function(item, pos) {
    return headers.indexOf(item) == pos;
})

console.log(headers);

for(z in headers){
  txt += `<th>`+headers[z]+`</th>`
  }


txt +="</tr>"
 for (x in Obj) {
            txt += `<tr>
   <td>`+ Obj[x].id + `</td>
   <td>`+ Obj[x].firstName + `</td>
   <td>`+ Obj[x].lastName + `</td>
   <td>`+ Obj[x].eyecolor + `</td>
   <td>`+ Obj[x].height + `</td>
   <td>`+ Obj[x].hairy + `</td>
   <td>`+ Obj[x].legs + `</td>
   <td>`+ Obj[x].weight + `</td>
   <td>`+ Obj[x].age + `</td>
   <td>`+ Obj[x].friendly + `</td>
</tr>`;
        }
        document.getElementById("featureInfo").innerHTML = txt;

table tr td, th{
  border:1px solid black
}

<table  id="featureInfo">
    <tr>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>

  <tr>
      <td></td>    
      <td></td>
      <td></td>
      <td></td>    
      <td></td>
      <td></td>
  </tr>

</table>

代码示例 - https://codepen.io/nagasai/pen/eMpJEE