使用下拉菜单将带有下拉列表的html表导出到CSV文件中

Question

如标题中所写，我有一个HTML表，该表只有几列，用户必须从下拉列表中选择值。我想要做的就是能够将此表导出到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的属性，第二个（隐藏和不具有selects的属性）被更新。因此，当您单击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>