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

My goal is to display the first 'feeling's as a column and the third column 'value'. The second column 'description' is kept hidden but ideally appears in a small box as mouseover is called as the user rolls the mouse over the value of feeling. For example the following would be showed before mouseover:

Happy 5 excited 6 Sad 1

Then as your mouse hovers over 'Happy", the following would appear "A positive feeling. synonymous with joyful, jolly, gay".

So far I have come up with the following. Please help.

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  id="tableData"></tbody>
</table>

CodePudding user response：

A bit like this?

    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 >${feeling}</td>`;
        tbody  = `<div >${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  id="tableData"></tbody>
</table>