JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<table>
  <thead>
    <tr>
      <th>Col1</th>
      <th>Col2</th>
      <th>Col3</th>
      <th>Col4</th>
      <th>Col5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input/></td>
      <td><input/></td>
      <td><input/></td>
      <td><input/></td>
      <td><input/></td>
    </tr>
  </tbody>
</table>

JavaScript

// edited from https://jsfiddle.net/mowglisanu/zmhg5rwo/
$(document).on('paste', 'table input', function(e){
	
    var $this = $(event.target);
    $.each(e.originalEvent.clipboardData.items, function(i, v){
        if (v.type === 'text/plain'){
            v.getAsString(function(text){
                var x = $this.closest('td').index(),
                    y = $this.closest('tr').index(),
                    obj = {};
                text = text.trim('\r\n');
                $.each(text.split('\r\n'), function(i2, v2){ /* row loop */

                    // get current # of rows, add rows if pasted data is more than rows
                    currRows = $("tbody tr").length;
                    if (i2 >= currRows) { // add rows if needed
                      currCols = $("thead tr th").length;
                      diff = parseInt(i2-currRows);
                      cell = "<td><input/></td>"
                      row = "<tr>"+cell.repeat(currCols)+"</tr>"
                      $("tbody").append(row.repeat(diff));	
                    }
				
                    $.each(v2.split('\t'), function(i3, v3){ /* inner cell loop*/
                        var row = y+i2, col = x+i3;
                        obj['cell-'+row+'-'+col] = v3;
                        $('tbody').find('tr:eq('+row+') td:eq('+col+') input').val(v3);
                        // line above this doesn't work on rows added after pageload
                    });
										
                });
                $('#testoutput').text(JSON.stringify(obj));
            });
        }
    });
    return false;
   
});