我这里有这个表,并且想将其内容保存在 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>
最佳答案
问题
初始表格行中的输入元素具有 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".
}
关于javascript - 如何循环表行以导出 CSV 中的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52423728/