我有一個允許用戶添加更多列的表格，在添加的列的單元格內有一個下拉串列選項。我試圖實作一個匯出 csv 功能，但它似乎只適用于沒有下拉串列的表格。我不知道如何在下拉串列中獲取所選專案。
我的出口輸出：
正如您所看到的，匯出的檔案沒有正確格式化表格并且它完全混亂。我所有的下拉串列選項都顯示在A列上，但我真正需要的只是在正確的列上顯示選定的值，即Group1.
題
- 如何使用選定的下拉串列值以正確的格式匯出 csv 檔案？
- 如果用戶選擇
Null作為他們的選項，如何將匯出的 csv 列設為空？例如：如果用戶選擇Null，匯出的 csv 檔案不應包含任何值，只存盤一個空單元格。
完整代碼：
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<h2>HTML Table</h2>
<table id="member_table">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
<h1>Existing Group</h1>
<p>IT, Cleaning, Accountant</p>
<h1>Add New Group</h1>
<p id="myP"></p>
<input type="tel" id="group" name="group" placeholder="enter group name">
<br><br>
<button type="button" class="btn btn-primary btn-sm">Submit</button>
<button onclick="javascript:appendColumn()">Add column</button>
<button onclick="export2csv()">csv</button>
<script>
function createSelectEl(values){
var select = document.createElement("select");
select.name = "group1";
select.id = "groupId"
// 1st option
var option = document.createElement("option");
option.text = 'Null';
select.appendChild(option);
for (const val of values)
{
var option = document.createElement("option");
option.value = val;
option.text = val;
select.appendChild(option);
}
return select;
}
let groupNum = 1;
const tableEl = document.getElementById('member_table');
// append column to the HTML table
function appendColumn() {
// open loop for each row and append cell
for (let i = 0; i < tableEl.rows.length; i ) {
const values = ["IT", "Cleaning", "Accountant"];
const myP = document.querySelector('p#myP');
var categories = myP.innerText.split(',');
for(let j =0; j < categories.length; j ){
values.push(categories[j]);
}
createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), createSelectEl(values), 'col');
// createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), i, 'col');
}
tableEl.rows[0].querySelector('td:last-child').textContent = 'Group' groupNum;
groupNum ;
}
// create DIV element and append to the table cell
function createCell(cell, text, style) {
var div = document.createElement('div'); // create DIV element
//txt = document.createTextNode(text); // create text node
// div.appendChild(txt); // append text node to the DIV
div.appendChild(text);
div.setAttribute('class', style); // set DIV class attribute
div.setAttribute('className', style); // set DIV class attribute for IE (?!)
cell.appendChild(div); // append DIV to the table cell
}
</script>
<script>
function export2csv() {
let data = "";
const tableData = [];
const rows = document.querySelectorAll("table tr");
for (const row of rows) {
const rowData = [];
for (const [index, column] of row.querySelectorAll("th, td").entries()) {
// To retain the commas in the "Description" column, we can enclose those fields in quotation marks.
if ((index 1) % 3 === 0) {
rowData.push('"' column.innerText '"');
} else {
rowData.push(column.innerText);
}
}
tableData.push(rowData.join(","));
}
data = tableData.join("\n");
const a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([data], { type: "text/csv" }));
a.setAttribute("download", "data.csv");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
</script>
<script>
const submit = document.querySelector('button');
const input = document.querySelector('input');
const select = document.querySelector('select');
const myP = document.querySelector('p#myP');
submit.addEventListener('click', function(e)
{
const values = input.value.split(',');
if (myP.innerText == '')
{
myP.innerText = values;
}
else
{
myP.innerText = ', ' values;
}
});
</script>
</body>
</html>
uj5u.com熱心網友回復：
您只需要更新您的export2csv函式以考慮該select元素。我首先檢查是否td包含一個select元素，如果不同，我會處理它：
function export2csv() {
let data = "";
const tableData = [];
const rows = document.querySelectorAll("table tr");
for (const row of rows) {
const rowData = [];
for (const [index, column] of row.querySelectorAll("th, td").entries()) {
const select = column.querySelector('select');
const text = column.innerText;
if(select){
if(select.value && select.value.toLowerCase() !== 'null') {
rowData.push(select.value);
} else {
rowData.push('');
}
} else if (text.includes(',')) {
// If the data contains commas wrap it in quotations.
rowData.push(`"${text}"`);
} else {
rowData.push(text);
}
}
tableData.push(rowData.join(","));
}
data = tableData.join("\n");
const a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([data], { type: "text/csv" }));
a.setAttribute("download", "data.csv");
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
您可能需要考慮洗掉元素中Null第一個選項的值select。如果第一個選項為空會更好：
// 1st option
var option = document.createElement("option");
option.text = '';
這將簡化您必須在export2csv函式中檢查的內容：
if(select.value) {
rowData.push(select.value);
} else {
rowData.push('');
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/322242.html
標籤：javascript html