javascript - 如何循环表行以导出 CSV 中的值

Question

我这里有这个表，并且想将其内容保存在 CSV 中。目前我认为这只适用于表格的第一行。但我可以通过按钮添加更多行，现在我希望保存到 CSV 的功能适用于所有行。

我无法处理表格循环，谁能教我怎么做？

这是一个 fiddle :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。如果您尝试通过输入 id 访问输入值，那么您将只能获得 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".
}