Input fields lose css attributes after text input

I have a table of cells in html

<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="10" /></td>
        <td><input type="text" id="11" /></td>
        <td><input type="text" id="12" /></td>
        <td><input type="text" id="13" /></td>
        <td><input type="text" id="14" /></td>
        <td><input type="text" id="15" /></td>
        <td><input type="text" id="16" /></td>
        <td><input type="text" id="17" /></td>
        <td><input type="text" id="18" /></td>
      </tr>
      <tr>
        <td><input type="text" id="19" /></td>
        <td><input type="text" id="20" /></td>
        <td><input type="text" id="21" /></td>
        <td><input type="text" id="22" /></td>
        <td><input type="text" id="23" /></td>
        <td><input type="text" id="24" /></td>
        <td><input type="text" id="25" /></td>
        <td><input type="text" id="26" /></td>
        <td><input type="text" id="27" /></td>
      </tr>
      <tr>
        <td><input type="text" id="28" /></td>
        <td><input type="text" id="29" /></td>
        <td><input type="text" id="30" /></td>
        <td><input type="text" id="31" /></td>
        <td><input type="text" id="32" /></td>
        <td><input type="text" id="33" /></td>
        <td><input type="text" id="34" /></td>
        <td><input type="text" id="35" /></td>
        <td><input type="text" id="36" /></td>
      </tr>

      <tr>
        <td><input type="text" id="37" /></td>
        <td><input type="text" id="38" /></td>
        <td><input type="text" id="39" /></td>
        <td><input type="text" id="40" /></td>
        <td><input type="text" id="41" /></td>
        <td><input type="text" id="42" /></td>
        <td><input type="text" id="43" /></td>
        <td><input type="text" id="44" /></td>
        <td><input type="text" id="45" /></td>
      </tr>

      <tr>
        <td><input type="text" id="46" /></td>
        <td><input type="text" id="47" /></td>
        <td><input type="text" id="48" /></td>
        <td><input type="text" id="49" /></td>
        <td><input type="text" id="50" /></td>
        <td><input type="text" id="51" /></td>
        <td><input type="text" id="52" /></td>
        <td><input type="text" id="53" /></td>
        <td><input type="text" id="54" /></td>
      </tr>

      <tr>
        <td><input type="text" id="55" /></td>
        <td><input type="text" id="56" /></td>
        <td><input type="text" id="57" /></td>
        <td><input type="text" id="58" /></td>
        <td><input type="text" id="59" /></td>
        <td><input type="text" id="60" /></td>
        <td><input type="text" id="61" /></td>
        <td><input type="text" id="62" /></td>
        <td><input type="text" id="63" /></td>
      </tr>

      <tr>
        <td><input type="text" id="64" /></td>
        <td><input type="text" id="65" /></td>
        <td><input type="text" id="66" /></td>
        <td><input type="text" id="67" /></td>
        <td><input type="text" id="68" /></td>
        <td><input type="text" id="69" /></td>
        <td><input type="text" id="70" /></td>
        <td><input type="text" id="71" /></td>
        <td><input type="text" id="72" /></td>
      </tr>
      <tr>
        <td><input type="text" id="73" /></td>
        <td><input type="text" id="74" /></td>
        <td><input type="text" id="75" /></td>
        <td><input type="text" id="76" /></td>
        <td><input type="text" id="77" /></td>
        <td><input type="text" id="78" /></td>
        <td><input type="text" id="79" /></td>
        <td><input type="text" id="80" /></td>
        <td><input type="text" id="81" /></td>
        
      </tr>

      

      
    
  </table>

With the following css

* { box-sizing: border-box; }
table { margin: 10px; }
tr:first-child td {
    border-top-color: black;
}
tr:nth-child(3n) td {
    border-bottom-color: black;
}
td {
    border: 1px solid lightgrey;
    height: 40px;
    width: 40px;
}
td:first-child {
    border-left-color: black;
}
td:nth-child(3n) {
    border-right-color: black;
}
input {
    padding: 0;
    text-align: center;
    border: 0;
    height: 40px;
    width: 40px;
    text-align: center;
}

input:hover {
    background: #eee;
}

This allows each cell to be editable and when you hover over the cell it changes colour slightly

I added this js to add values to the cells

document.querySelectorAll('td').forEach((cell) => {
     cell.textContent = "1";



})

This does its job it fills the grid with the number but it also makes the css stop working it no longer lets me edit and no longer has the hover effects it also seems to change the font?

Im i correct in using ‘textContent’ ?

Any help would be appreciated thanks

177 thoughts on “Input fields lose css attributes after text input”

Leave a Comment