(R)编辑数据表中多列数据后单元格的渐变颜色

<table id="dataTable">
  <tr>
    <td contenteditable="true">10</td>
    <td contenteditable="true">20</td>
  </tr>
  <tr>
    <td contenteditable="true">30</td>
    <td contenteditable="true">40</td>
  </tr>
</table>

#dataTable td {
  padding: 10px;
  border: 1px solid #ccc;
}

.gradient-low {
  background: linear-gradient(to right, green, lightgreen);
}

.gradient-medium {
  background: linear-gradient(to right, yellow, lightyellow);
}

.gradient-high {
  background: linear-gradient(to right, red, lightcoral);
}

document.getElementById('dataTable').addEventListener('input', function(event) {
  const target = event.target;
  const value = parseInt(target.innerText, 10);
  
  if (!isNaN(value)) {
    if (value < 20) {
      target.className = 'gradient-low';
    } else if (value < 30) {
      target.className = 'gradient-medium';
    } else {
      target.className = 'gradient-high';
    }
  }
});