Генерация таблицы с данными, исправить ошибку

Question

    <body>
    <p><textarea id="inputField">Patricia Graves
Female
494 North Fillmore Drive
Vallejo, FL 38478
11-10-2005
patriciagraves
Dg$e43sO
[email protected]</textarea></p>
    <p><button id="submitButton" type="button">Create!</button></p>
    <div id="table_div">
    </div>
    
    <script>
        let parentTag = document.querySelector('#table_div');
        let inputField = document.querySelector('#inputField');
        let submitButton = document.querySelector('#submitButton');
    
        function generateTable() {
            let tableElement = document.createElement('table');
            parentTag.appendChild(tableElement);
            return tableElement;
        }
    
        function generateLine(table) {
            let lineElement = document.createElement("tr");
            table.appendChild(lineElement);
            return lineElement;
        }
    
        function generateHeaderCell(innerHTML, line) {
            let headerCellElement = document.createElement("th");
            line.appendChild(headerCellElement);
            headerCellElement.innerHTML = innerHTML;
            return headerCellElement;
        }
    
        function generateCell(innerHTML, line) {
            let cellElement = document.createElement("td");
            line.appendChild(cellElement);
            cellElement.innerHTML = innerHTML;
            return cellElement;
        }
    
        let headers = ["FirstName", "LastName", "Gender", "Address", "BirthDate", "Nickname", "Password", "Email"];
    
        submitButton.addEventListener('click', function () {
            parentTag.innerHTML = '';
            let inputValues = inputField.value;
            let inputArray = inputValues.split('\n\n');
    
            let table = generateTable();
            let headerLine = generateLine(table);
            for (let i = 0; i < headers.length; i++){
                generateHeaderCell(headers[i], headerLine);
            }
            for(let i = 0; i < inputArray.length; i++){
                let line = inputArray[i].split('\n');
                headerLine = generateLine(table);
                for (let j = 0; j < line.length; j++){
                    generateCell(line[j], headerLine);
                }
            }
        })
    </script>
    </body>

В textarea вводится текст, как исправить, что бы в LastName записовалось правильно, а не гендер Даные:

Patricia Graves
Female
494 North Fillmore Drive
Vallejo, FL 38478
11-10-2005
patriciagraves
Dg$e43sO
[email protected]

Weston George
Male
52 Ash Drive
Fort Lauderdale, IN 29157
02-12-1965
westongeorge
ZlG72$sd
[email protected]

Cristian Simon
Male
980 Jefferson Terrace
Sunnyvale, CA 82894
07-19-1923
cristiansimon
K3$9aaIb
[email protected]

https://drive.google.com/file/d/1tZhN6n8Aseqosje528EG15OXWQsuFWrK/view

Answer 1

<body>
    <p><textarea id="inputField">Patricia Graves
Female
494 North Fillmore Drive
Vallejo, FL 38478
11-10-2005
patriciagraves
Dg$e43sO
[email protected]

Weston George
Male
52 Ash Drive
Fort Lauderdale, IN 29157
02-12-1965
westongeorge
ZlG72$sd
[email protected]

Cristian Simon
Male
980 Jefferson Terrace
Sunnyvale, CA 82894
07-19-1923
cristiansimon
K3$9aaIb
[email protected]</textarea></p>
    <p><button id="submitButton" type="button">Create!</button></p>
    <div id="table_div">
    </div>
    
    <script>
        let parentTag = document.querySelector('#table_div');
        let inputField = document.querySelector('#inputField');
        let submitButton = document.querySelector('#submitButton');
    
        function generateTable() {
            let tableElement = document.createElement('table');
            parentTag.appendChild(tableElement);
            return tableElement;
        }
    
        function generateLine(table) {
            let lineElement = document.createElement("tr");
            table.appendChild(lineElement);
            return lineElement;
        }
    
        function generateHeaderCell(innerHTML, line) {
            let headerCellElement = document.createElement("th");
            line.appendChild(headerCellElement);
            headerCellElement.innerHTML = innerHTML;
            return headerCellElement;
        }
    
        function generateCell(innerHTML, line) {
            let cellElement = document.createElement("td");
            line.appendChild(cellElement);
            cellElement.innerHTML = innerHTML;
            return cellElement;
        }
    
        let headers = ["FirstName", "LastName", "Gender", "Address", "BirthDate", "Nickname", "Password", "Email"];
    
        submitButton.addEventListener('click', function () {
            parentTag.innerHTML = '';
            let inputValues = inputField.value;
            let inputArray = inputValues.split('\n\n');

            let table = generateTable();
            let headerLine = generateLine(table);
            for (let i = 0; i < headers.length; i++){
                generateHeaderCell(headers[i], headerLine);
            }
            for(let i = 0; i < inputArray.length; i++){
                let line = inputArray[i].split('\n');
                let names = line[0].split(' ');
                line.splice(0, 1, names[0], names[1]);
                headerLine = generateLine(table);
                for (let j = 0; j < line.length; j++){
                    generateCell(line[j], headerLine);
                }
            }
        })
    </script>
    </body>

БЛОГ НА HUSL

Генерация таблицы с данными, исправить ошибку

Ответы (1 шт):