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。

如果您将titel，vorname等添加为类名而不是ID，那么您将可以调用document.getElementsByClassName('titel');来获取整个titel列条目集合，然后遍历该集合

Answer 2

问题

初始表行中的输入元素具有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".
}

如何遍历表行以导出CSV中的值

2 个答案:

问题

解决方案