如何從excel粘貼到多個輸入？

下面的JavaScript代碼的目的是爲了讓用戶能夠從excel中立即複製多個單元格（第&列），然後將它們粘貼到多個文本輸入中，因此每個單元格都被複制到以下輸入中。該代碼效果很好 - http://jsfiddle.net/vqa8feL4/2/。如何從excel粘貼到多個輸入？

不過，我有兩個問題：

由於我放在一個表中的文本輸入，代碼停止工作，我只是想不通爲什麼。
我想讓代碼粘貼到textareas而不僅僅是文本輸入。

隨着表：http://jsfiddle.net/vqa8feL4/1/

HTML：

<table> 
    <thead> 
     <th>Name</th> 
     <th>Age</th> 
     <th>Description</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <input type="text"> 
      </td> 
      <td> 
       <input type="text"> 
      </td> 
      <td> 
       <textarea></textarea> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <input type="text"> 
      </td> 
      <td> 
       <input type="text"> 
      </td> 
      <td> 
       <textarea></textarea> 
      </td> 
     </tr> 
    </tbody> 
</table>

JS：

$('input').bind('paste', null, function(e){ 
    $this = $(this); 

    setTimeout(function(){ 
     var columns = $this.val().split(/\s+/); 

     var i; 
     var input = $this 
     for(i=0; i < columns.length; i++){ 
      input .val(columns[i]); 
      input = input.next(); 
     } 
    }, 0); 
});

來源

2015-08-27 Centro Commerciale

https://api.jquery.com/next/

jQuery.next（）查找緊隨其後的每個元素

的兄弟既然你已經添加的投入到TD有最有可能沒有兄弟姐妹。

您需要獲取當前輸入，然後遍歷到td，然後轉到下一個td並找到包含的輸入。

input = input.closest('td').next('td').find('input');

但是隨後因爲如果你在最後的TD需要遍歷表中的下一個TR（行），你會遇到麻煩。

這裏是一個可能幫助你的小提琴。

$('input,textarea').bind('paste', function (e) { 
    var $start = $(this); 
    var source 

    //check for access to clipboard from window or event 
    if (window.clipboardData !== undefined) { 
     source = window.clipboardData 
    } else { 
     source = e.originalEvent.clipboardData; 
    } 
    var data = source.getData("Text"); 
    if (data.length > 0) { 
     if (data.indexOf("\t") > -1) { 
      var columns = data.split("\n"); 
      $.each(columns, function() { 
       var values = this.split("\t"); 
       $.each(values, function() { 
        $start.val(this); 
        if ($start.closest('td').next('td').find('input,textarea')[0] != undefined || $start.closest('td').next('td').find('textarea')[0] != undefined) { 
        $start = $start.closest('td').next('td').find('input,textarea'); 
        } 
        else 
        { 
        return false; 
        } 
       }); 
       $start = $start.closest('td').parent().next('tr').children('td:first').find('input,textarea'); 
      }); 
      e.preventDefault(); 
     } 
    } 
});

忘記的鏈接小提琴：

http://jsfiddle.net/SeanWessell/cav8h5d1/

來源

2015-08-27 19:55:05

嘿，感謝您簡潔答案但是仍然有一個問題。如果我粘貼已進入的單元格 - 它的內容將被輸入分割。我怎樣才能避免這種情況？ –

我剛更新。我忘了包含文本區域。應該現在工作。讓我知道如果它不是，什麼不工作。 –

如果我粘貼已進入的單元格 - 其內容將被輸入分割。 –

所以我找到了部分答案這給FOT第一問題的解決方案

$('td input').bind('paste', null, function (e) { 
    $this = $(this); 

    setTimeout(function() { 
     var columns = $this.val().split(/\s+/); 

     var i; 
     var input = $this; 
     for (i = 0; i < columns.length; i++) { 
      input.val(columns[i]); 
      if(i % 3 !== 2){ 
       input = input.parent().next().find('input'); 
      } 
      else{ 
       input = input.parent().parent().next().find('input'); 
      } 
     } 
    }, 0); 
});

儘管如此，我仍然需要一些幫助來解決第二個問題。

任何幫助，將不勝感激！ :)

來源

2015-08-27 19:49:09

如何從excel粘貼到多個輸入？

回答

相關問題