Javascript 如何循环表格行以导出CSV中的值

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

我不能在桌子上打圈，有人能告诉我怎么做吗

这是一把小提琴：

函数csv（）{
var titel=document.getElementById（'titel'）.value；
var vorname=document.getElementById（'vorname'）.value；
var nachname=document.getElementById（'nachname'）.value；
var email=document.getElementById（'email'）。值；
const rows=[[titel，vorname，nachname，email]]；
让csvContent=“data:text/csv；charset=utf-8，”；
rows.forEach（函数（rowArray）{
让row=rowArray.join（“；”）；
csvContent+=行+“\r\n”；
});
var encodedUri=encodeURI（csvContent）；
var link=document.createElement（“a”）；
link.setAttribute（“href”，encodedUri）；
link.setAttribute（“下载”、“导出.csv”）；
document.body.appendChild（link）；//FF需要
link.click（）；//这将下载名为“my_data.csv”的数据文件。
}

#
石膏
称呼
滴度
沃名称
姓氏
电子邮件


奥斯瓦伦比特酒店

行数越多，就不能再在表的每一行中使用相同的ID

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

---

如果您添加

titel

，

vorname

等作为类名而不是ID，那么您将能够调用

document.getElementsByClassName（'titel'）

要将整个

titel

列作为一个条目集合，然后使用更多行在该集合上迭代，您不能再在表的每一行中使用相同的ID

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

如果您添加

titel

，

vorname

等作为类名而不是ID，那么您将能够调用

document.getElementsByClassName（'titel'）

将整个

titel

列作为条目集合，然后迭代此集合

问题 初始表行中的输入元素具有

id

标记。通过在表的最后一行追加克隆，可以添加新行

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

这意味着所有新输入将具有相同的

id

s。如果您试图通过输入

id

s访问输入值，那么您将只获得DOM中的第一个值

此外，在

csv

函数中，您只能获得一次输入。每次访问一行时都需要获取它们

解决方案 将HTML中的表更改为具有以下表单的输入：

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

在

csv

函数中，获取表行的节点列表。然后逐步浏览列表，即逐行访问表，并按每行的类名获取输入。从这里您可以构建您的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（）{
var rowList=document.getElementById（'myTable'）.getElementsByTagName（'tbody'）[0].getElementsByTagName（'tr'）；
让csvContent=“data:text/csv；charset=utf-8，”；
对于（var r=0；r

问题 初始表行中的输入元素具有

id

标记。通过在表的最后一行追加克隆，可以添加新行

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

这意味着所有新输入将具有相同的

id

s。如果您试图通过输入

id

s访问输入值，那么您将只获得DOM中的第一个值

此外，在

csv

函数中，您只能获得一次输入。每次访问一行时都需要获取它们

解决方案 将HTML中的表更改为具有以下表单的输入：

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

在

csv

函数中，获取表行的节点列表。然后逐步浏览列表，即逐行访问表，并按每行的类名获取输入。从这里您可以构建您的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（）{
var rowList=document.getElementById（'myTable'）.getElementsByTagName（'tbody'）[0].getElementsByTagName（'tr'）；
让csvContent=“data:text/csv；charset=utf-8，”；
对于（var r=0；r