Как зациклить строки таблицы для экспорта значений в CSV

Question

У меня есть эта таблица, и я хотел бы сохранить ее содержимое в формате CSV.На данный момент я так далеко, как это работает только для первого ряда таблицы.Но я могу добавить больше строк с помощью кнопки, и теперь я хочу, чтобы сохранение в CSV работало для всех строк.

Я не могу обрабатывать циклы по таблице, кто-нибудь может показать мне, как?

Вот скрипка: https://jsfiddle.net/jg3Lpt74/31/

function csv() {
    
            var titel = document.getElementById('titel').value;
            var vorname = document.getElementById('vorname').value;
            var nachname = document.getElementById('nachname').value;
            var email = document.getElementById('email').value;
    
            const rows = [[titel, vorname, nachname, email]];
            let csvContent = "data:text/csv;charset=utf-8,";
            rows.forEach(function (rowArray) {
                let row = rowArray.join(";");
                csvContent += row + "\r\n";
            });
    
            var encodedUri = encodeURI(csvContent);
            var link = document.createElement("a");
            link.setAttribute("href", encodedUri);
            link.setAttribute("download", "export.csv");
            document.body.appendChild(link); // Required for FF
    
            link.click(); // This will download the data file named "my_data.csv".
    
        }

<table id="myTable" border=1>
    <thead>
    <tr>
        <th>#</th>
        <th>Geschlecht</th>
        <th>Anrede</th>
        <th>Titel</th>
        <th>Vorname</th>
        <th>Nachname</th>
        <th>E-Mail</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <p>
                <label>
                    <input type="checkbox" name="chk"/>
                    <span></span>
                </label>
            </p>
        </td>
        <td>
            <div class="input-field">
                <div>
                    <select class="browser-default genderSelect" required>
                        <option value="new" selected>Bitte auswählen</option>
                    </select>
                </div>
            </div>
        </td>
        <td>
            <div class="input-field">
                <div>
                    <select class="browser-default gsAddress" required>
                    </select>
                </div>
            </div>
        </td>
        <td>
            <input name="titel" id="titel" type="text">
        </td>
        <td>
            <input name="vorname" id="vorname" type="text" class="validate">
        </td>
        <td>
            <input name="nachname" id="nachname" type="text" class="validate">
        </td>
        <td>
            <input name="email" id="email" type="text" class="validate">
        </td>
    </tr>
    </tbody>
</table>

Answer 1

Проблема

Входные элементы в исходной строке таблицы имеют теги id.Вы добавляете новую строку, добавляя клон в последнюю строку таблицы.

var newRow = $("#myTable tr:last").clone().appendTo("#myTable");

Это означает, что все новые входы будут иметь одинаковые id s.Если вы попытаетесь получить доступ к входным значениям через вход id s, то вы получите только первый присутствующий в DOM.

Кроме того, в вашей функции csv вы получаете входы только один раз.Вы должны получать их каждый раз, когда получаете доступ к строке.

Решение

Измените таблицу в своем HTML, чтобы иметь входные данные в форме:

<input name="titel" class="titel" type="text">

Обратите внимание, чтоАтрибут id был изменен на class.Полный tbody:

<tbody>
    <tr>
        <td>
            <p>
                <label>
                <input type="checkbox" name="chk"/>
                <span></span>
                </label>
            </p>
        </td>
        <td>
            <div class="input-field">
                <div>
                <select class="browser-default genderSelect" required>
                    <option value="new" selected>Bitte auswählen</option>
                </select>
                </div>
            </div>
        </td>
        <td>
            <div class="input-field">
                <div>
                <select class="browser-default gsAddress" required>
                </select>
                </div>
            </div>
        </td>
        <td>
            <input name="titel" class="titel" type="text">
        </td>
        <td>
            <input name="vorname" class="vorname" type="text" class="validate">
        </td>
        <td>
            <input name="nachname" class="nachname" type="text" class="validate">
        </td>
        <td>
            <input name="email" class="email" type="text" class="validate">
        </td>
    </tr>
</tbody>

В вашей функции csv получите NodeList строк вашей таблицы.Затем вы шагаете по списку, то есть получаете доступ к таблице строка за строкой, и получаете входные данные из каждой строки по имени класса.Из этого вы можете создать свой CSV-файл.

function csv() {
    var rowList = document.getElementById('myTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr');

    let csvContent = "data:text/csv;charset=utf-8,";

    for( var r = 0; r < rowList.length; r++  ) {
        var row = rowList[ r ];
        var titel = row.getElementsByClassName('titel')[0].value;
        var vorname = row.getElementsByClassName('vorname')[0].value;
        var nachname = row.getElementsByClassName('nachname')[0].value;
        var email = row.getElementsByClassName('email')[0].value;
        csvContent += [titel, vorname, nachname, email].join(";") + "\r\n";
    }

    var encodedUri = encodeURI(csvContent);
    var link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "export.csv");
    document.body.appendChild(link); // Required for FF

    link.click(); // This will download the data file named "my_data.csv".
}

Answer 2

Чем больше строк, тем больше нельзя использовать одинаковые идентификаторы в каждой строке таблицы.

Если вы добавите titel, vorname и т. Д. В качестве имен классов, а не идентификаторов, то вы будетевозможность вызвать document.getElementsByClassName('titel');, чтобы получить весь столбец titel как коллекцию записей, а затем выполнить итерацию по этой коллекции