javascript - 将对象属性添加到表头并将对象属性值添加到表行

Question

我有一个 html 表格。仅当鼠标悬停在指定对象上时，我才设法显示表格。例如，当位于狗对象上时，它将显示狗的名称。我还想知道鼠标悬停在猫上方时的猫年龄，简而言之，我想根据鼠标位置使用不同的对象属性填充表格。这是我的 table :

   //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

要达到预期结果，请使用以下显示列和显示可用值的选项

构建表需要两个循环

1. 对于标题
2. 用于从人类、狗、猫对象构建行

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