我的目標是將第一個“感覺”顯示為一列，第三列顯示“價值”。第二列“描述”保持隱藏，但理想情況下顯示在一個小框中，因為當用戶將滑鼠滾過感覺值時，滑鼠懸停被呼叫。例如，滑鼠懸停前會顯示以下內容：
快樂 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>uj5u.com熱心網友回復：
有點像這樣？
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 class="row" id="tableData"></tbody>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/455824.html
標籤：javascript 数据库 目的
上一篇：將物件值和屬性轉換為陣列
下一篇：嵌套物件以回應未記錄到控制臺