javascript - Export table to csv with multiple dropdowns

Copy code

<form  method="POST" action="select.php">
<table class="table-responsive table-striped table-bordered" id="example">
        
<thead>
<tr>
<th>Id</th>
<th>Nome Praia</th>
<th>Turno</th>
<?php
$x = 0;
$dias = array();
while ($row = mysqli_fetch_assoc($resultsett))
{
echo "<th>" . $row['dia'] . "</th>";
$dia = $row['dia'];
$id_dia = $row['id_dia'];
array_push($dias, $id_dia);
$x++;
                            
}
?>
</tr>
</thead>
<tbody>
<?php
$sql_query = "SELECT * FROM tb_praia";
$resultset = mysqli_query($conn, $sql_query) or die("database error:" . mysqli_error($conn));
while ($res = mysqli_fetch_assoc($resultset))
{
$id_praia = $res['id_praia'];
$nome_praia = $res['nome_praia'];
$turno = $res['turno'];                     
?>
<tr id="<?php $id_praia; ?>">
<td> <?php echo $id_praia; ?></td>
<td><?php echo $nome_praia; ?> </td>
<td><?php echo $turno; ?></td>
<?php for ($i = 0;$i < $x;$i++)
{   
if ($id_praia % 2 == 0){
$query = "SELECT tb_nadadores.id_nadador, nome from tb_disponibilidade inner JOIN 
tb_nadadores on tb_disponibilidade.id_nadador=tb_nadadores.id_nadador 
where id_dia = $dias[$i] and Tarde=1 order by id_nadador ASC";
}else{
$query = "SELECT tb_nadadores.id_nadador, nome from tb_disponibilidade inner JOIN 
tb_nadadores on tb_disponibilidade.id_nadador=tb_nadadores.id_nadador 
where id_dia = $dias[$i] and Manh??=1 order by id_nadador ASC ";
}
$resposta = mysqli_query($conn, $query);
echo (
'<td>
<select name="nadadores[]"  size="1" class="form-select multiple-select"    multiple>
<br>'
);
if (mysqli_num_rows($resposta) > 0)
{
while ($teste = mysqli_fetch_assoc($resposta))
{
$nadador = $teste['nome'];
$id_nadador = $teste['id_nadador'];
echo "<option value=$id_nadador>$nadador</option>";
}
echo '</select>';
}
else{
echo 'N??o foram encontrados resultados!';
}
echo "<input type='hidden' name='dias[]' value=$dias[$i] >";
echo "<input type='hidden' name='turno' value=$turno >";
echo "<input type='hidden' name='id_praia' value=$id_praia >";
echo "<input type='hidden' name='nome_praia' value=$nome_praia>";
}
}               
?>
</tr>
</tbody>
</table>
<input type="submit" name="enviar" value="Enviar">
</form>

$(document).ready(function() {
    
    $(".multiple-select").select2({
      maximumSelectionLength: 2,
    
      width: 'resolve'
    });
    
    $('.multiple-select').on('select2:select', function (e) {
        var  {id}  = e.params.data;
        
        var { dia, praia, turno} = e.currentTarget.dataset
        
        console.log({ dia, praia, id, turno});
        $.post('data.php', { dia, praia, id, turno })
        // console.log(data);
        
    })
    
    $('.multiple-select').on('select2:unselect', function (remove) {
        var  {id}  = remove.params.data;
    
        var { dia, praia, turno} = remove.currentTarget.dataset
        $.post('remove.php',  { dia, praia, id, turno })
        console.log( { dia, praia, id, turno });
});

});

    
Copy code

Export script
Copy code

    function downloadCSVFile(csv, filename) {
        var csv_file, download_link;

        csv_file = new Blob([csv], {type: "text/csv"});

        download_link = document.createElement("a");

        download_link.download = filename;

        download_link.href = window.URL.createObjectURL(csv_file);

        download_link.style.display = "none";

        document.body.appendChild(download_link);

        download_link.click();
    }

        document.getElementById("download-button").addEventListener("click", function () {
            var html = document.querySelector("table").outerHTML;
            htmlToCSV(html, "Horario_Definido.csv");
        });


        function htmlToCSV(html, filename) {
            var data = [];
            var rows = document.querySelectorAll("table tr");
                    
            for (var i = 0; i < rows.length; i++) {
                var row = [], cols = rows[i].querySelectorAll("td, th");
                        
                 for (var j = 0; j < cols.length; j++) {
                        row.push(cols[j].innerText);
                         }
                        
                data.push(row.join(","));       
            }

            //to remove table heading
            //data.shift()

            downloadCSVFile(data.join("\n"), filename);
        }
Copy code