jquery - 如何从 Excel 粘贴到多个输入？

Question

下面的 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);
});

Answer 1

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/