使用 jquery/javascript 將帶有下拉列表的 html 表導出到 CSV 文件

Question

如標題中所寫，我有 HTML 表，其中有幾列用戶必須從下拉列表中獲取 select 值。 我想要做的是能夠將此表導出到 CSV 文件。 我在網上找到了一個 jquery 插件，但下拉列表有問題。 它返回每行的所有選項，而不是選擇的選項。 我試圖解決這個問題，但我失敗了。

JQuery 插件和示例表在 jsfiddle 中：

https://jsfiddle.net/bLa8pn74/

我試圖插入這個：

if($(this).find('select').each(function(){
                    line.push(_quote_text($(this).find("option:selected").text()));
                }));

但它只打印了頭排。 我現在應該是簡單的改變，但我就是想不通。

編輯：我希望我的解決方案是不創建新表。

編輯2 ：我也試過這段代碼：

if($(this).find('select')){
    line.push(_quote_text($(this).find('option:selected').text()));
            }
    line.push(_quote_text(_trim_text($(this).text())));

它給了我選擇的選項，然后是所有下拉選項，以及額外的“”，“”，它會在其中找到一個空單元格。

如果我在第二個“line.push”之前添加“else”，那么它只返回選定的值，其他的都是空的。

Answer 1

您可以使用兩個高光表，第一個（可見）帶有 select，第二個（隱藏且沒有選擇）在第一個表的 select 更改時更新。 因此，當您單擊 exportToCSV 按鈕時，您可以在其單元格中傳遞具有正確值的隱藏表

 jQuery("#import").on('click', function (event) { $('#tableToExport').table2csv({ file_name: 'test.csv', header_body_space: 0 }); }); jQuery(document).on('change','select',function(){ var text = $(this).find("option:selected").text(); var td = $(this).parent() var tr = $(this).parent().parent(); var col = tr.children().index(td); var row = tr.parent().children().index(tr); console.log('Row: ' + (row - 1) + ', Column: ' + (col- 1)); $('#tableToExport tbody').find('tr').eq(row ).find('td').eq(col -1 ).text(text); }); // JQuery Plugin /** * @description: Plugin to export HTML table to CSV file. * @author: VenkataRamanaB * @link: https://github.com/venkataramanab/table2csv * Feel free to use or modify this plugin as far as my full name is kept */ (function ($) { const _trim_text = (text) => { return text.trim(); }; const _quote_text = (text) => { return '"' + text + '"'; }; const _export = (lines, file_name) => { const uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(lines.join('\n')); const el_a = document.createElement('a'); el_a.href = uri; el_a.download = file_name; document.body.appendChild(el_a); el_a.click(); document.body.removeChild(el_a); }; const init = (tb, options) => { let lines = []; $(tb).find('thead>tr').each(function () { let line = []; $(this).find('th').each(function () { line.push(_quote_text(_trim_text($(this).text()))); }); lines.push(line.splice(0).toString()); }) for (let i = 0; i < options.header_body_space; i++) lines.push('\n'); $(tb).find('tbody>tr').each(function () { let line = []; $(this).find('td').each(function () { //This is what I tried to import but it is not working /*if($(this).find('select').each(function(){ line.push(_quote_text($(this).find("option:selected").text())); }));*/ line.push(_quote_text(_trim_text($(this).text()))); }); lines.push(line.splice(0).toString()); }) _export(lines, options.file_name) }; $.fn.extend({ table2csv: function (options) { const default_options = { file_name: 'table_records.csv', header_body_space: 1 }; options = $.extend(default_options, options); init(this, options); } }) })(jQuery); $(function(){ var firstDDM = ['aaa','bbb','ccc','ddd']; var firstshortcut = ['a','b','c','d']; var option = "", select = ""; for(var i=0; i<firstDDM.length;i++){ option += '<option value="'+ firstshortcut[i] + '">' + firstDDM[i] + '</option>'; } select = '<select class="firstDDM" >' + option + '</select>'; $("#my_id tr").each(function() { $(this).find("td:eq(3)").append(select); }); });

 table { border-collapse: collapse; border: 1px black solid; font: 12px sans-serif; width: 100%; table-layout:auto; } td { border: 1px black solid; text-align: left; padding: 2px; } thead:hover{ text-decoration: none;important: } thead tr:first-child{ color;white: text-align; center: background-color; #5bc0de: padding; 10px: } tr:nth-child(even){ background-color: #f2f2f2 } tr:hover{ background-color; #5bc0de: } button{ display; inline: padding; 50px: } input button{ display; inline. }:dropbtn{ background-color; blue. }:table-responsive { overflow-y; auto: height; 800px. }:table-responsive table { border-collapse; collapse: width; 100%. }:table-responsive thead th{ position; sticky: top; 0: background-color; #5bc0de: padding; 2px: }::-webkit-scrollbar { width; 12px: }::-webkit-scrollbar-thumb { background-color; darkgrey: outline; 1px solid slategrey. }:myButtons{ display; inline: padding; 20px; }

 <html> <head> <title>Filtered CSV File</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="static/bootstrap.min.css" rel="stylesheet" media="screen"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.css"/> </head> <body> <h1> Filtered CSV FIle </h1> <br/> <br/> <div> <input type="button" value="Import" class="btn btn-info" id="import"> </div> <br/> <div class="table-responsive"> <table class="dataframe my_class" id="my_id"> <thead> <tr style="text-align:right;"> <th> </th> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> <th>col6</th> <th>col7</th> <th>col8</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>row1</td> <td>row1</td> <td>row1</td> <td></td> <td>row1</td> <td><select name="code"> <option value="a">AAA</option> <option value="b">BBB</option> </select></td> <td>row1</td> <td>row1</td> </tr> <tr> <th>2</th> <td>row2</td> <td>row2</td> <td>row2</td> <td></td> <td>row2</td> <td><select name="code"> <option value="a">AAA</option> <option value="b">BBB</option> </select></td> <td>row2</td> <td>row2</td> </tr> <tr> <th>3</th> <td>row3</td> <td>row3</td> <td>row3</td> <td></td> <td>row3</td> <td><select name="code"> <option value="a">AAA</option> <option value="b">BBB</option> </select></td> <td>row3</td> <td>row3</td> </tr> </tbody> </table> <br><br> the following table can be hide by css display:none <br><br> <table class="" id="tableToExport"> <thead> <tr style="text-align:right;"> <th> </th> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> <th>col6</th> <th>col7</th> <th>col8</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>row1</td> <td>row1</td> <td>row1</td> <td></td> <td>row1</td> <td></td> <td>row1</td> <td>row1</td> </tr> <tr> <th>2</th> <td>row2</td> <td>row2</td> <td>row2</td> <td></td> <td>row2</td> <td></td> <td>row2</td> <td>row2</td> </tr> <tr> <th>3</th> <td>row3</td> <td>row3</td> <td>row3</td> <td></td> <td>row3</td> <td></td> <td>row3</td> <td>row3</td> </tr> </tbody> </table> </div> </body> </html>

Answer 2

這是您的工作代碼....

 jQuery("#import").on('click', function (event) { $('#my_id').table2csv({ file_name: 'test.csv', header_body_space: 0 }); }); // JQuery Plugin /** * @description: Plugin to export HTML table to CSV file. * @author: VenkataRamanaB * @link: https://github.com/venkataramanab/table2csv * Feel free to use or modify this plugin as far as my full name is kept */ (function ($) { const _trim_text = (text) => { return text.trim(); }; const _quote_text = (text) => { return '"' + text + '"'; }; const _export = (lines, file_name) => { const uri = 'data:text/csv;charset=utf-8,' + encodeURIComponent(lines.join('\n')); const el_a = document.createElement('a'); el_a.href = uri; el_a.download = file_name; document.body.appendChild(el_a); el_a.click(); document.body.removeChild(el_a); }; const init = (tb, options) => { let lines = []; $(tb).find('thead>tr').each(function () { let line = []; $(this).find('th').each(function () { line.push(_quote_text(_trim_text($(this).text()))); }); lines.push(line.splice(0).toString()); }) for (let i = 0; i < options.header_body_space; i++) lines.push('\n'); $(tb).find('tbody>tr').each(function () { let line = []; $(this).find('td').each(function () { /* If <td> has <select>, CSV have selected value */ if($(this).find('select').length > 0){ var optVal = $(this).find('select').val(); var selectVal = $(this).find('option[value="'+optVal+'"]').text(); line.push(_quote_text(_trim_text(selectVal))); } else{ line.push(_quote_text(_trim_text($(this).text()))); } }); lines.push(line.splice(0).toString()); }) _export(lines, options.file_name) }; $.fn.extend({ table2csv: function (options) { const default_options = { file_name: 'table_records.csv', header_body_space: 1 }; options = $.extend(default_options, options); init(this, options); } }) })(jQuery); $(function(){ var firstDDM = ['aaa','bbb','ccc','ddd']; var firstshortcut = ['a','b','c','d']; var option = "", select = ""; for(var i=0; i<firstDDM.length;i++){ option += '<option value="'+ firstshortcut[i] + '">' + firstDDM[i] + '</option>'; } select = '<select class="firstDDM" type="firstDDM">' + option + '</select>'; $("tr").each(function() { $(this).find("td:eq(3)").append(select); }); });

 table { border-collapse: collapse; border: 1px black solid; font: 12px sans-serif; width: 100%; table-layout:auto; } td { border: 1px black solid; text-align: left; padding: 2px; } thead:hover{ text-decoration: none;important: } thead tr:first-child{ color;white: text-align; center: background-color; #5bc0de: padding; 10px: } tr:nth-child(even){ background-color: #f2f2f2 } tr:hover{ background-color; #5bc0de: } button{ display; inline: padding; 50px: } input button{ display; inline. }:dropbtn{ background-color; blue. }:table-responsive { overflow-y; auto: height; 800px. }:table-responsive table { border-collapse; collapse: width; 100%. }:table-responsive thead th{ position; sticky: top; 0: background-color; #5bc0de: padding; 2px: }::-webkit-scrollbar { width; 12px: }::-webkit-scrollbar-thumb { background-color; darkgrey: outline; 1px solid slategrey. }:myButtons{ display; inline: padding; 20px; }

 <html> <head> <title>Filtered CSV File</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="static/bootstrap.min.css" rel="stylesheet" media="screen"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.css"/> </head> <body> <h1> Filtered CSV FIle </h1> <br/> <br/> <div> <input type="button" value="Import" class="btn btn-info" id="import"> </div> <br/> <div class="table-responsive"> <table class="dataframe my_class" id="my_id"> <thead> <tr style="text-align:right;"> <th> </th> <th>col1</th> <th>col2</th> <th>col3</th> <th>col4</th> <th>col5</th> <th>col6</th> <th>col7</th> <th>col8</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>row1</td> <td>row1</td> <td>row1</td> <td></td> <td>row1</td> <td><select name="code"> <option value="a">AAA</option> <option value="b">BBB</option> </select></td> <td>row1</td> <td>row1</td> </tr> <tr> <th>2</th> <td>row2</td> <td>row2</td> <td>row2</td> <td></td> <td>row2</td> <td><select name="code"> <option value="a">AAA</option> <option value="b">BBB</option> </select></td> <td>row2</td> <td>row2</td> </tr> <tr> <th>3</th> <td>row3</td> <td>row3</td> <td>row3</td> <td></td> <td>row3</td> <td><select name="code"> <option value="a">AAA</option> <option value="b">BBB</option> </select></td> <td>row3</td> <td>row3</td> </tr> </tbody> </table> </div> </body> </html>

Answer 3

我找到了丟失的東西。 我只需要 if 條件中的“.length”。

if($(this).find('select').length){
          line.push(_quote_text($(this).find('option:selected').text()));
 }else{
       line.push(_quote_text(_trim_text($(this).text())));
       }