使用 Javascript 显示对象，并在实现 mouseenter 或类似内容后显示相关文本

Question

我的目标是将第一个“感觉”显示为一列，第三列显示为 'value'。第二列 'description' 保持隐藏状态，但理想情况下显示在一个小框中，因为当用户将鼠标悬停在感觉值上时会调用 mouseover。例如，在鼠标悬停之前将显示以下内容：

快乐5 兴奋 6 悲伤 1

然后当你的鼠标悬停在'快乐'上时，就会出现下面的'积极的感觉。快乐、快活、快乐的同义词。

到目前为止，我已经想出了以下内容。请帮忙。

var mainObj = [{
    feeling: "Happy",
    description: "A positive feeling. synonymous with joyful, jolly, gay",
    value: 5
  },
  {
    feeling: "excited",
    description: "Noun version of excite and is defined as eagerness for something",
    value: 6
  },
  {
    feeling: "Sad",
    description: "A negative feeling that is antonymous with happy",
    value: 1
  }
];

var k = '<tbody>'
for (i = 0; i < mainObj.length; i++) {
  k += '<tr>';
  k += '<td>' + mainObj[i].feeling + '</td>';
  k += '<td>' + mainObj[i].description + '</td>';
  k += '<td>' + mainObj[i].value + '</td>';
  k += '</tr>';
}
k += '</tbody>';
document.getElementById('tableData').innerHTML = k;

<table cellpadding="2" width="49%">
  <thead>
    <tr>
      <th>G\Feeling</th>
      <th>description</th>
      <th>value</th>
    </tr>
  </thead>
  <tbody class="row" id="tableData"></tbody>
</table>

Answer 1

有点像这样？

    const feelings = [
        {
            feeling: 'Happy',
            description: 'A positive feeling. synonymous with joyful, jolly, gay',
            value: 5,
        },
        {
            feeling: 'Excited',
            description: 'Noun version of excite and is defined as eagerness for something',
            value: 6,
        },
        {
            feeling: 'Sad',
            description: 'A negative feeling that is antonymous with happy',
            value: 1,
        },
    ];

    let tbody = '<tbody>';

    for (const { feeling, description, value } of Object.values(feelings)) {
        tbody += '<tr>';
        tbody += `<td class="feeling">${feeling}</td>`;
        tbody += `<div class="hide description">${description}</div>`;
        tbody += `<td>${value}</td>`;
        tbody += '</tr>';
    }
    tbody += '</tbody>';
    document.getElementById('tableData').innerHTML = tbody;

    document.querySelector('#tableData').addEventListener('mouseover', ({ target }) => {
        if (![...target.classList].includes('feeling')) return;

        const description = target.parentNode.nextElementSibling;

        description.classList.remove('hide');

        const handleMouseOut = function () {
            description.classList.add('hide');
            target.removeEventListener('mouseout', handleMouseOut);
        };

        target.addEventListener('mouseout', handleMouseOut);
    });

   .hide {
        visibility: hidden;
    }

    .description {
        position: relative;
        background: rgba(26, 219, 0, 0.459);
        width: 200px;
        height: 75px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        left: 50%;
    }

<table cellpadding="2" width="49%">
    <thead>
        <tr>
            <th>Feeling</th>
            <th>Value</th>
        </tr>
    </thead>
    <tbody class="row" id="tableData"></tbody>
</table>

使用 Javascript 显示对象，并在实现 mouseenter 或类似内容后显示相关文本

Display object with Javascript and have related text appear once mouseenter or something similar is realised

javascript

database

object