jquery – 如何从excel粘贴到许多输入？

2023年1月18日 322次阅读

下面的
JavaScript代码的目的是使用户能够从excel(行和列)一次复制多个单元格,然后将它们粘贴到多个文本输入中,因此每个单元格都复制到以下输入.

该代码运行良好 –
http://jsfiddle.net/vqa8feL4/2/.

但是我有两个问题：

>由于我将文本输入放在一个表中,代码停止工作,我只是无法弄清楚原因.
>我希望代码能够将粘贴的内容也转换为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);
});

最佳答案
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/

点赞