How can I paste from excel to many inputs?

Question

The purpose of the JavaScript code below is to enable the user to copy multiple cells at once from excel (rows & columns) and then paste them into multiple text inputs, so every cell is copied to the following input. That code works well - http://jsfiddle.net/vqa8feL4/2/.

However I have two problems:

• Since I placed the text inputs in a table, the code stopped working, and I just can't figure out why.
• I want the code to make the pasted content go also into the textareas and not only to the text inputs.

With table: 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() looks for the immediately following sibling of each element

Since you've added the inputs to a td there are most likely no siblings.

You would need to get the current input then traverse up to the td then goto the next td and find the input contained.

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

However then you will run into trouble because if you're at the last td you need to traverse to the next tr (row) in the table.

here is a fiddle that might help you.

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

Forgot the link to the fiddle:

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