Member 13402731 Ответов: 1

Как скопировать и вставить столбцы excel в HTML-таблицу с входными данными?

Я хочу скопировать и вставить столбцы excel или любые подобные списки в HTML-таблицу. У меня есть этот код, но есть проблема. Он вставляет данные, как строку. Так как же я могу изменить его, чтобы вставить как колонку? Заранее спасибо.

Что я уже пробовал:

<pre><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

</head>

<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <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>

    <script>
    $(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>
    
</body>
</html>

1 Ответов

Рейтинг:
5

Karthik_Mahalingam

пробовать

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

</head>

<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <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>

    <script>
        $(document).ready(function () {
            $('td input').bind('paste', null, function (e) {
                $txt = $(this);
                setTimeout(function () {
                    var values = $txt.val().split(/\s+/);
                    var currentRowIndex = $txt.parent().parent().index();
                    var currentColIndex = $txt.parent().index(); 
                    
                    var totalRows = $('#example tbody tr').length;
                    var totalCols = $('#example thead th').length;
                    var count =0;
                    for (var i = currentColIndex; i < totalCols; i++) {
                        if (i != currentColIndex)
                            if (i != currentColIndex)
                                currentRowIndex = 0;
                        for (var j = currentRowIndex; j < totalRows; j++) {                           
                            var value = values[count];
                            var inp = $('#example tbody tr').eq(j).find('td').eq(i).find('input');
                            inp.val(value);
                            count++;
                           
                        }
                    }


                }, 0);
            });
        });
    </script>

</body>
</html>


Демонстрация - JSFiddle[^]