JSFiddle - React, Tailwind, and code Playground

by Sean Wessell

HTML

<form>
  <table class="spreadsheet">
    <thead>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
  <button action="post">
    submit
  </button>
</form>

CSS

.spreadsheet {
  width: 100%;
  border-collapse: collapse;
}

.spreadsheet td {padding:0 0 0 0;border:1px solid grey;  overflow:hidden;}

.spreadsheet .input{
  border:none;
  border-bottom:1px solid grey;
  width: 100%;
  height: 100%;

}
.spreadsheet .input:focus {
    border:none;
  background:red;
}

JavaScript

$('.spreadsheet').each(function() {
  var $this = $(this);
  var $trs = $this.find('tbody tr');

  $trs.each(function() {
    var $tds = $(this).find('td');

    $tds.each(function() {
      var $td = $(this);
      var val = $td.text();
      $td.data('value', val)
      var $input = $('<input/>').addClass('input').val($td.text()).on('change input paste', function() {

        $(this).closest('td').data('value', this.value)

      })
      $td.html($input);
    })

  })

}).closest('form').submit(function(e) {

  $('.spreadsheet').each(function() {
    var $this = $(this);
    var $trs = $this.find('tbody tr');

    $trs.each(function() {
      var $tds = $(this).find('td');

      $tds.each(function() {
        var $td = $(this);

        $td.html($td.data('value'));
      })

    })
  });

  e.preventDefault();

})