HDkilic
HDkilic

Reputation: 17

How copy and paste excel columns to HTML table with inputs?

I want to copy and paste excel columns or any similar lists into HTML table. I have found this code, but there is an issue. It pastes data like a row. So how can I change It to paste like a column? Thanks in advance.

$(document).ready(function() {
        $('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);
        });
    } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
        </thead>
        <tbody>
            <tr>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><input type="text"></td>
                <td><input type="text"></td>
                <td><input type="text"></td>
            </tr>
        </tbody>
    </table>

Upvotes: 1

Views: 6692

Answers (1)

Here is solution for you:

$(document).ready(function() {
        $('td input').bind('paste', null, function(e) {
            $input = $(this);
            setTimeout(function() {
                var values = $input.val().split(/\s+/),
                    row = $input.closest('tr'),
                    col = $input.closest('td').index();
                    console.log(col);
                for (var i = 0; i < values.length; i++) {
                    row.find('input').eq(col).val(values[i]);
                    row = row.next();
                }
            }, 0);
        });
    });

Upvotes: 2

Related Questions