Copy and paste from excel spreadsheet into HTML table with cloned rows using Javascript?

I have a table where the user can decide how many rows they wish to add. I've found a script that copy and pastes both columns and rows from excel. It works perfectly from the first 2 existing row's but the function doesn't work properly in any of the cloned rows that get added.

So if you use the function on the first two row's it will split the paste into each row and column (inluding the cloned rows) but if i try paste into a newly added row the function just doesn't work,

function cloneRow() {
  var rowAmmount = document.getElementById("rowAmmount").value;
  var getTotalRows = $('table > tbody').children().length;
  for (var i = -1; i < rowAmmount-1;i++) {
    var row = document.getElementById("row"); // find row to copy
    var table = document.getElementById("table"); // find table to append to
    var clone = row.cloneNode(true); // copy children too
    clone.id = "newRow" + (getTotalRows + i); // change id or other attributes/contents
    clone.classList.remove('hidden');
    table.appendChild(clone); // add new row to end of table
    $('#newRow' + (getTotalRows + i)).children().each(function() {
      $(this).children().attr('id', $(this).children().attr('id') + (getTotalRows + i));
    });

  }}

  $('input').on('paste', function(e){
      var $this = $(this);
      $.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()+1,
                      obj = {};
                  text = text.trim('\r\n');
                  $.each(text.split('\r\n'), function(i2, v2){
                      $.each(v2.split('\t'), function(i3, v3){
                          var row = y+i2, col = x+i3;
                          obj['cell-'+row+'-'+col] = v3;
                          $this.closest('table').find('tr:eq('+row+') td:eq('+col+') input').val(v3);
                      });
                  });

              });
          }
      });
      return false;

  });

<script src=".1.1/jquery.min.js"></script>
<input id="rowAmmount"/>
<button id="add" onclick="cloneRow()">New Row</button>
<button type="button" onclick="submit()">Submit</button>
<table>
  <thead>
      <tr>
      <th>Product Code</th>
      <th>Item Name</th>
      <th>Long Description></th>
      <th>Material</th>
      <th>Style</th>
      </tr>
  </thead>
  <tbody  id="table">
    <tr id="row">
      <td><input id="productId"></td>
      <td><input id="itemname"></td>
      <td><input id="long"></td>
      <td><input id="fabric"></td>
      <td><input id="style"></td>
      </tr>
    <tr id= "newRow0">
      <td><input id="productId0"></td>
      <td><input id="itemname0"></td>
      <td><input id="long0"></td>
      <td><input id="fabric0"></td>
      <td><input id="style0"></td>
    </tr>
  </tbody>
</table>

So if you use the function on the first two row's it will split the paste into each row and column (inluding the cloned rows) but if i try paste into a newly added row the function just doesn't work,

function cloneRow() {
  var rowAmmount = document.getElementById("rowAmmount").value;
  var getTotalRows = $('table > tbody').children().length;
  for (var i = -1; i < rowAmmount-1;i++) {
    var row = document.getElementById("row"); // find row to copy
    var table = document.getElementById("table"); // find table to append to
    var clone = row.cloneNode(true); // copy children too
    clone.id = "newRow" + (getTotalRows + i); // change id or other attributes/contents
    clone.classList.remove('hidden');
    table.appendChild(clone); // add new row to end of table
    $('#newRow' + (getTotalRows + i)).children().each(function() {
      $(this).children().attr('id', $(this).children().attr('id') + (getTotalRows + i));
    });

  }}

  $('input').on('paste', function(e){
      var $this = $(this);
      $.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()+1,
                      obj = {};
                  text = text.trim('\r\n');
                  $.each(text.split('\r\n'), function(i2, v2){
                      $.each(v2.split('\t'), function(i3, v3){
                          var row = y+i2, col = x+i3;
                          obj['cell-'+row+'-'+col] = v3;
                          $this.closest('table').find('tr:eq('+row+') td:eq('+col+') input').val(v3);
                      });
                  });

              });
          }
      });
      return false;

  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="rowAmmount"/>
<button id="add" onclick="cloneRow()">New Row</button>
<button type="button" onclick="submit()">Submit</button>
<table>
  <thead>
      <tr>
      <th>Product Code</th>
      <th>Item Name</th>
      <th>Long Description></th>
      <th>Material</th>
      <th>Style</th>
      </tr>
  </thead>
  <tbody  id="table">
    <tr id="row">
      <td><input id="productId"></td>
      <td><input id="itemname"></td>
      <td><input id="long"></td>
      <td><input id="fabric"></td>
      <td><input id="style"></td>
      </tr>
    <tr id= "newRow0">
      <td><input id="productId0"></td>
      <td><input id="itemname0"></td>
      <td><input id="long0"></td>
      <td><input id="fabric0"></td>
      <td><input id="style0"></td>
    </tr>
  </tbody>
</table>

Share Improve this question asked Jun 22, 2018 at 13:41 D.Cliffe 572 silver badges12 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

You attach the change event handler before you insert the new inputs.
What you need is delegated event handling $('table').on('paste', 'input', function(e){

function cloneRow() {
  var rowAmmount = document.getElementById("rowAmmount").value;
  var getTotalRows = $('table > tbody').children().length;
  for (var i = -1; i < rowAmmount-1;i++) {
    var row = document.getElementById("row"); // find row to copy
    var table = document.getElementById("table"); // find table to append to
    var clone = row.cloneNode(true); // copy children too
    clone.id = "newRow" + (getTotalRows + i); // change id or other attributes/contents
    clone.classList.remove('hidden');
    table.appendChild(clone); // add new row to end of table
    $('#newRow' + (getTotalRows + i)).children().each(function() {
      $(this).children().attr('id', $(this).children().attr('id') + (getTotalRows + i));
    });

  }}

  $('table').on('paste', 'input', function(e){
      var $this = $(this);
      $.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()+1,
                      obj = {};
                  text = text.trim('\r\n');
                  $.each(text.split('\r\n'), function(i2, v2){
                      $.each(v2.split('\t'), function(i3, v3){
                          var row = y+i2, col = x+i3;
                          obj['cell-'+row+'-'+col] = v3;
                          $this.closest('table').find('tr:eq('+row+') td:eq('+col+') input').val(v3);
                      });
                  });

              });
          }
      });
      return false;

  });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="rowAmmount"/>
<button id="add" onclick="cloneRow()">New Row</button>
<button type="button" onclick="submit()">Submit</button>
<table>
  <thead>
      <tr>
      <th>Product Code</th>
      <th>Item Name</th>
      <th>Long Description></th>
      <th>Material</th>
      <th>Style</th>
      </tr>
  </thead>
  <tbody  id="table">
    <tr id="row">
      <td><input id="productId"></td>
      <td><input id="itemname"></td>
      <td><input id="long"></td>
      <td><input id="fabric"></td>
      <td><input id="style"></td>
      </tr>
    <tr id= "newRow0">
      <td><input id="productId0"></td>
      <td><input id="itemname0"></td>
      <td><input id="long0"></td>
      <td><input id="fabric0"></td>
      <td><input id="style0"></td>
    </tr>
  </tbody>
</table>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Copy and paste from excel spreadsheet into HTML table with cloned rows using Javascript? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)