Export HTML table to dynamic Excel with the user

Asked

Viewed 492 times

0

I have a table in html where the user will put the values, after informing the values in this table, I must export as excel.

Currently the code is exporting only the values "th", I can not identify how to take the values typed by the user, I’ve read the publications related to the subject, but all I found pass values "fixed".

<body>
    <div>
        <table id="tblExport">
            <thead>
                <tr>
                    <th>Mês e Ano</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <input id="mes_ano_1" placeholder ="dd/mm/yyyy" type="text" name="mes_ano">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input id="mes_ano_2" placeholder ="dd/mm/yyyy" type="text" name="mes_ano">
                    </td>
                </tr>
            </tbody>
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Produto</th>
                            <th>Quantidade</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <input id="num_vidas_1" placeholder ="Nome" type="text" name="info_nome">
                            </td>
                            <td>
                                <input id="vl_sinis_1" placeholder ="Nome do Produto" type="text" name="info_prod">
                            </td>
                            <td>
                                <input id="vl_copay_1" placeholder ="Quantidade vendida" type="text" name="info_qntd">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input id="num_vidas_11" placeholder ="Nome" type="text" name="info_nome">
                            </td>
                            <td>
                                <input id="vl_sinis_11" placeholder ="Nome do Produto" type="text" name="info_prod">
                            </td>
                            <td>
                                <input  id="vl_copay_11" placeholder ="Quantidade vendida" type="text" name="info_qntd">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </table>
        <br><br>
        <button id="btnExport">Export to excel</button>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="js/jquery.btechco.excelexport.js"></script>
    <script src="js/jquery.base64.js"></script>
    <script>
      $(document).ready(function () {
          $("#btnExport").click(function () {
              $("#tblExport").btechco_excelexport({
                  containerid: "tblExport"
                 , datatype: $datatype.Table
                 , filename: 'sample'
              });
          });
      });
    </script>   
</body>
javascript html jquery excel table

1 answer

0

You can try to do the following, create a form separately from the table, when you click on export it first copies what was reported in the form to the table and then exports. I made a small example:

<html>
 <body>
      
		<form>
			<label>Mês e Ano 1</label>
			<input id="form_mes_ano_1" placeholder ="dd/mm/yyyy" type="text" name="mes_ano">
			<hr>
			
			<label>Mês e Ano 2</label>			
			<input id="form_mes_ano_2" placeholder ="dd/mm/yyyy" type="text" name="mes_ano">
			<hr>
			
			<button id="btnExport">Exportar</button>
		</form>
	    <div>
          <table id="tblExport">
             <thead>
                <tr>
                   <th>Mês e Ano</th>
                </tr>
             </thead>
             <tbody>
                <tr>
                   <td id="mes_ano_1">*</td>
                </tr>
                <tr>
                   <td id="mes_ano_2">*</td>
                </tr>
             </tbody>
          </table>
      
		</div>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="jquery.btechco.excelexport.js"></script>
  <script src="jquery.base64.js"></script>
  <script>
    $(document).ready(function () {
        $("#btnExport").click(function (event) {
			event.preventDefault();
			//Copiar do formulário para a tabela
			$('#mes_ano_1').html($('#form_mes_ano_1').val());
			$('#mes_ano_2').html($('#form_mes_ano_2').val());
            $("#tblExport").btechco_excelexport({
                containerid: "tblExport"
               , datatype: $datatype.Table
               , filename: 'formulario'
            });
        });
    });
  </script>   
</body>
</html>

  • Not yet :c, excel keeps coming empty

Browser other questions tagged javascript html jquery excel table

You are not signed in. Login or sign up in order to post.