jquery之如何从 Excel 粘贴到多个输入_编程设计

下面的 JavaScript 代码的目的是使用户能够一次从 Excel 复制多个单元格(行和列)，然后将它们粘贴到多个文本输入中，因此每个单元格都会复制到以下输入中。该代码运行良好 - http://jsfiddle.net/vqa8feL4/2/ .

但是我有两个问题:

自从我将文本输入放入表格中后，代码就停止工作，我就是不明白为什么。
我希望代码能够使粘贴的内容也进入文本区域，而不仅仅是文本输入。

带表: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); 
});

请您参考如下方法:

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

jQuery.next() 查找每个元素紧随其后的同级元素

由于您已将输入添加到 td，因此很可能没有同级。

您需要获取当前输入，然后遍历到 td，然后转到下一个 td 并找到包含的输入。

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

但是这样你就会遇到麻烦，因为如果你在最后一个 td 处，你需要遍历到表中的下一个 tr(行)。

这是一个可能对您有帮助的 fiddle 。

$('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(); 
        } 
    } 
});

忘记了 fiddle 的链接:

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