My HTML table contains cells
<table id="grid">
<tr>
<td><input type="text" id="1" /></td>
<td><input type="text" id="2" /></td>
<td><input type="text" id="3" /></td>
<td><input type="text" id="4" /></td>
<td><input type="text" id="5" /></td>
<td><input type="text" id="6" /></td>
<td><input type="text" id="7" /></td>
<td><input type="text" id="8" /></td>
<td><input type="text" id="9" /></td>
</tr>
<tr>
...
<td><input type="text" id="81" /></td>
</tr>
</table>
The CSS styles the cells for editing and hovering
* { box-sizing: border-box; }
table { margin: 10px; }
....
input:hover {
background: #eee;
}
I used JavaScript to populate the cells with values
document.querySelectorAll('td').forEach((cell) => {
cell.textContent = "1";
})
However, using 'textContent' causes issues with the CSS. It disables editing and hover effects, and changes the font. Any advice on this?
Your assistance is appreciated. Thank you