Bootstrap Inline Table Cell Editing — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bscell-card">
    <div class="card-body p-3">
      <h6 class="fw-bold mb-2">Inventory</h6>
      <table class="table table-sm align-middle mb-0">
        <thead><tr><th>Item</th><th>Qty</th><th>Unit price</th></tr></thead>
        <tbody id="bscellBody"></tbody>
      </table>
      <p class="small text-muted mt-2 mb-0">Click Qty or Unit price to edit. Enter saves, Escape cancels.</p>
    </div>
  </div>
</div>

.bscell-card { width: 400px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bscell-editable { cursor: pointer; border-radius: 5px; padding: 2px 6px; }
.bscell-editable:hover { background: #f0f1f5; }
.bscell-editing input { width: 80px; }

let rows = [
  { id: 1, name: 'USB-C Cable', qty: 42, price: 9.99 },
  { id: 2, name: 'Wireless Mouse', qty: 18, price: 24.5 },
  { id: 3, name: 'Laptop Stand', qty: 7, price: 39 },
];

const body = document.getElementById('bscellBody');

function render() {
  body.innerHTML = rows.map(r =>
    '<tr data-id="' + r.id + '">' +
      '<td>' + r.name + '</td>' +
      '<td><span class="bscell-editable" data-field="qty">' + r.qty + '</span></td>' +
      '<td><span class="bscell-editable" data-field="price">$' + r.price.toFixed(2) + '</span></td>' +
    '</tr>'
  ).join('');
}

function startEdit(cell) {
  const td = cell.closest('td');
  const tr = cell.closest('tr');
  const rowId = Number(tr.dataset.id);
  const field = cell.dataset.field;
  const row = rows.find(r => r.id === rowId);
  const rawValue = field === 'price' ? row.price : row.qty;

  td.classList.add('bscell-editing');
  td.innerHTML = '<input type="number" class="form-control form-control-sm" value="' + rawValue + '" ' +
    (field === 'price' ? 'step="0.01"' : 'step="1"') + '>';
  const input = td.querySelector('input');
  input.focus();
  input.select();

  // Removing the input from the DOM (which render() does) itself fires a
  // native blur event on it — without this guard, pressing Escape would
  // call commit(false), re-render, and then that synthetic blur would
  // immediately fire commit(true) again with the same stale input value,
  // silently overwriting the discard with an unwanted save.
  let committed = false;
  function commit(save) {
    if (committed) return;
    committed = true;
    if (save) {
      const parsed = Number(input.value);
      if (!Number.isNaN(parsed) && parsed >= 0) {
        row[field] = field === 'price' ? Math.round(parsed * 100) / 100 : Math.round(parsed);
      }
    }
    render();
  }

  input.addEventListener('blur', () => commit(true));
  input.addEventListener('keydown', e => {
    if (e.key === 'Enter') { e.preventDefault(); commit(true); }
    if (e.key === 'Escape') { e.preventDefault(); commit(false); }
  });
}

body.addEventListener('click', e => {
  const cell = e.target.closest('.bscell-editable');
  if (cell && !cell.closest('.bscell-editing')) startEdit(cell);
});

render();