javascript - 使用Javascript从excel电子表格复制并粘贴到带有克隆行的HTML表中？

Question

我有一个表格，用户可以在其中决定他们希望添加多少行。我找到了一个脚本，可以从 excel 复制和粘贴列和行。它从前 2 个现有行完美地工作，但该功能在任何添加的克隆行中都不能正常工作。

因此，如果您在前两行使用该功能，它会将粘贴拆分为每一行和每一列（包括克隆的行），但如果我尝试粘贴到新添加的行中，该功能将不起作用，

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.com/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>

标签： javascripthtmlexcel

Answer 1

在插入新输入之前附加更改事件处理程序。
您需要的是委托事件处理$('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.com/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>