Jump to content
lucas70770

Jspdf e Jspdf-autoTable como colocar uma tabela dentro de uma tr

Recommended Posts

Olá, eu tenho um sistema de pedidos onde em sua tabela a linha impar é os dados do produto e a impar é a grade de produtos, segue o código:

<table class="tabela-tab-produto">
  <thead>
    <tr>
      <th width="43"></th>
      <th>Código</th>
      <th>Descrição</th>
      <th>Qtde.</th>
      <th>Preço Tab.</th>
      <th>Desc.</th>
      <th>Preço Líq.</th>
      <th>Subtotal</th>
      <th></th>
    </tr>
  </thead>
  <tbody>

    <tr id="5{1+2,2{4+1">
      <td></td>
      <td>LS</td>
      <td>Cortinas Listradas</td>
      <td class="text-right padding-right-15">3 <small>Un</small></td>
      <td class="text-right"><small>R$</small> 119.9</td>
      <td class="text-center"></td>
      <td class="text-right"><small>R$</small> 150</td>
      <td class="text-right"><small>R$</small> 450</td>
      <td class="text-right">
        <a class="button tiny btn-cinza btn_editar" id="1"><span class="icon icon-pencil"></span></a>
        <a class="button tiny btn-cinza btn_excluir margin-right-15" data-open="container_excluir" id="86" aria-controls="container_excluir" aria-haspopup="true" tabindex="0"><span class="icon icon-bin"></span></a>
      </td>
    </tr>
    <tr>
      <td colspan="9">
        <div class="medium-12 columns">
          <table class="tab-produto">
            <thead>
              <tr>

                <th></th><th>380x230</th><th>580x230</th>
              </tr>
            </thead>
            <tbody>

              <tr><td>Azul Claro</td><td>1</td><td>-</td></tr><tr><td>Azul</td><td>-</td><td>2</td></tr>
            </tbody>
          </table>

        </div>
      </td>
    </tr><tr id="1{1+1">
    <td></td>
    <td>VLI</td>
    <td>Cortinas Voil Liso</td>
    <td class="text-right padding-right-15">1 <small>Un</small></td>
    <td class="text-right"><small>R$</small> 79.9</td>
    <td class="text-center"></td>
    <td class="text-right"><small>R$</small> 79.9</td>
    <td class="text-right"><small>R$</small> 79.9</td>
    <td class="text-right">
      <a class="button tiny btn-cinza btn_editar" id="3"><span class="icon icon-pencil"></span></a>
      <a class="button tiny btn-cinza btn_excluir margin-right-15" data-open="container_excluir" id="94" aria-controls="container_excluir" aria-haspopup="true" tabindex="0"><span class="icon icon-bin"></span></a>
    </td>
    </tr>
    <tr>
      <td colspan="9">
        <div class="medium-12 columns">
          <table class="tab-produto">
            <thead>
              <tr>

                <th></th><th>280x230</th>
              </tr>
            </thead>
            <tbody>

              <tr><td>Azul</td><td>1</td></tr>
            </tbody>
          </table>

        </div>
      </td>
    </tr>


  </tbody>
</table>

Quero saber como posso apresentar essa tabela com o jspdf e jspdf-autotable(se for necessário). Nos meus testes ele esta tirando a tabela que esta dentro da tabela principal.

Eu achei um artigo sobre isso(https://stackoverflow.com/questions/39386969/nested-tables-in-a-pdf-using-jspdf-and-jspdf-autotable) mas não consegui aplicar no meu caso. Obg   

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Luiz Henrique
      Olá;
       
      Estrou tentando importar a biblioteca Jquery em um projeto que utilizo o slim framework, mas a biblioteca não funciona se a importação dela for na index, (o slim está usando sistema de rotas), não sei se isso influencia em algo, mas para funcionar as aplicações jquery a importação da biblioteca tem que ser na página em uso.
       
      Criei um arquivo teste.js e uma função para dar um alert apenas e funciona até porque o css funciona o problema está com a biblioteca jquery, preciso configurar alguma coisa para que funcione importando ela pela index ou qualquer outro lugar, para que eu possa solicitar apenas 1 vez e não em todas as páginas ao qual utilizarei o jquery?
       
      Obrigado.
    • By Felipe Guedes Coutinho
      Galera, estou precisando ler 1 arquivo TXT mas não quero usar nenhum INPUT para carregar o arquivo.
       
      Eu tenho uma estrutura de pasta onde os meus arquivos TXT ficaram fisicamente e no meu código HTML + JS quero que ao alterar um SELECT OPTION, através da escolha eu validar se o arquivo com o nome selecionado existe na página e se existir eu ler ele e adicionando em um elemento qualquer, uma DIV como conteúdo ou dentro de uma TEXTAREA.
       
      Vou montar a estrutura de pasta abaixo e colocar imagens de exemplo:
       
      Estrutura de pasta
      projeto
          index.html
          dclgen <-- Aqui dentro tenho vários arquivos do formato TXT
              t1.txt
              t2.txt
              t3.txt
              ...
              t4.txt
       
      Pasta DCLGEN dentro da pasta projeto e a pasta DCLGEN junto com o arquivo HTML

       
      Ao escolher no SELECT o nome T1 quero que o JavaScript veja se o arquivo t1.txt existe e se existir quero LER o conteúdo dele e jogar em um ELEMENTO HTML.

       
      Preciso fazer isso da forma mais "SIMPLES" possível usando HTML e JavaScript.
       
      Alguém pode dar um help? Pesquisei no Google muitas opções e os códigos encontrados não me atenderam.
       
      Não quero ser obrigado a fazer um "UPLOAD" usando um INPUT do TIPO FILE, quero usar algo já dentro da pasta do projeto.
      <!DOCTYPE html> <html> <head> <title>Read Text File Tutorial</title> </head> <body> <input type="file" onchange="loadFile(this.files[0])"> <br> <pre id="output"></pre> <script> async function loadFile(file) { let text = await file.text(); document.getElementById('output').textContent = text; } </script> </body> </html> Código usando FileReader, mas que também está usando um INPUT como estimúlo, não é o que quero.
      document.getElementById('file').onchange = function(){ var file = this.files[0]; var reader = new FileReader(); reader.onload = function(progressEvent){ var fileContentArray = this.result.split(/\r\n|\n/); for(var line = 0; line < lines.length-1; line++){ console.log(line + " --> "+ lines[line]); } }; reader.readAsText(file); }; Encontrei esse código também, mas não consegui usar...
      Esse é o parâmetro passado na url "https://dicasdejavascript.com.br/exemplo.txt" function lerURL(URL) { var http = new XMLHttpRequest(); http.open("GET", URL, false); http.send(); console.log(http.responseText); } Espero que alguém consiga me ajudar...
       
      Desde já agradeço.
       
      Atenciosamente.
      Felipe Coutinho

    • By Giovanird
      Ola!
      Tenho uma lista de usuários e um link que abre uma div que mostra os detalhes deste usuario, este link usa o evento onClick do javascript.
      O problema é que quando clicado para abrir a div, a tela sobe para o inicio do topo.
      Preciso que a tela nao faça a rolagem para o topo e sim que fique na posição da lista.
      Segue meu codigo abaixo.
      Obrigado por momento
       
      <div class="container"> <div class="row"> <?php foreach para listar os usuários.... ?> <div class="col-10"> Nome do usuário </div> <div class="col-2"> <a href="#" onClick="Mudarestado('minhaDiv<?=$cod?>')"><img src="icons/chevron-right.svg"></a> </div> *** Parte ficará visivel ao clicar no link OnClick *** <div class="divacoes" id="minhaDiv<?=$cod?>" style="display:none"> <div class="row"> <div class="col"> ... dados dos usuarios... </div> </div> </div> *** **** <?php fim foreach que gera a lista de usuários... ?> </div> </div> <style> .divacoes { background-color: #64A338; border: none; padding: 20px; width: 97%; height: 80px; } </style> <script> function Mudarestado(el) { var display = document.getElementById(el).style.display; if (display == "none") document.getElementById(el).style.display = 'block'; else document.getElementById(el).style.display = 'none'; } </script>  
    • By Caio Vargas
      fala pessoal eu aqui de novo kkk
       
      consegui achar um tutorial de como criar o calendario fiz algumas modificaçoes 
       
      porem agora eu quero fazer o seguinte quero definir os dias que os serviços seram apresentados nos dias
       
      tipo tenho segunda terça quarta quinta sexta sabado e domingo ai esses dias seram inseridos no banco 
       
      como posso fazer uma verificação no codigo
       
      <?php // What is the first day of the month in question? function build_calendar($month, $year) { $Read = new Read; $Read->FullRead("SELECT * FROM " . DB_AGENDAMENTO . " WHERE MONTH(date) =:month AND YEAR(date)=:year","month={$month}&year={$year}"); $bookings = array(); if($Read->getResult()): if($Read->getRowCount() > 0): while($row = $Read->getResult()): $bookings[] = $row['date']; endwhile; endif; endif; // Create array containing abbreviations of days of week. // $daysOfWeek = array('Sunday', 'Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'); // Qual é o primeiro dia do mês em questão? $firstDayOfMonth = mktime(0,0,0,$month,1,$year); // Quantos dias este mês contém? $numberDays = date('t',$firstDayOfMonth); // Recuperar algumas informações sobre o primeiro dia do // mês em questão. $dateComponents = getdate($firstDayOfMonth); // What is the name of the month in question? $monthName = $dateComponents['month']; // What is the index value (0-6) of the first day of the // month in question. $dayOfWeek = $dateComponents['wday']; // Create the table tag opener and day headers $datetoday = date('Y-m-d'); $calendar = "<table class='table table-bordered'>"; $calendar .= "<center><h2>$monthName $year</h2>"; // se a data month < que a data atual então o botão sera desativado if($month <=> date('m')): $calendar.= "<a class='btn btn-xs btn-primary' href=". BASE ."/index/month/".date('m', mktime(0, 0, 0, $month-1, 1, $year))."/year/".date('Y', mktime(0, 0, 0, $month-1, 1, $year)).">Previous Month</a> "; else: $calendar.= "<a class='btn btn-xs btn-primary'>Previous Month</a>"; endif; $calendar.= " <a href=". BASE ." class='btn btn-xs btn-primary' data-month='".date('m')."' data-year='".date('Y')."'>Current Month</a> "; $calendar.= "<a href='". BASE ."/index/month/".date('m', mktime(0, 0, 0, $month+1, 1, $year))."/year/".date('Y', mktime(0, 0, 0, $month + 1, 1, $year))."' class='btn btn-xs btn-primary'>Next Month</a></center><br>"; $calendar .= "<tr>"; // Create the calendar headers foreach(getSemana() as $day): $calendar .= "<th class='header'>$day</th>"; endforeach; // Cria o resto do calendário // Inicia o contador de dias, começando com o 1º. $currentDay = 1; $calendar .= "</tr><tr>"; // A variável $dayOfWeek é usada para // assegura que o calendário // display consiste em exatamente 7 colunas. if($dayOfWeek > 0): for($k = 0; $k < $dayOfWeek; $k++): $calendar .= "<td class='empty'></td>"; endfor; endif; $month = str_pad($month, 2, "0", STR_PAD_LEFT); while ($currentDay <= $numberDays): //Sétima coluna (sábado) atingida. Inicie uma nova linha. if ($dayOfWeek == 7): $dayOfWeek = 0; $calendar .= "</tr><tr>"; endif; $currentDayRel = str_pad($currentDay, 2, "0", STR_PAD_LEFT); $date = "$year-$month-$currentDayRel"; //volta para a data atual $dayname = strtolower(date('l', strtotime($date))); $eventNum = 0; $appointment_date = date('Y-m-d', strtotime($appointment_date . ' +1 day')); $day_id = date('w',strtotime($appointment_date)); // var_dump($day_id); $today = $date == date('Y-m-d') ? "today" : ""; if($date < date('Y-m-d')): $calendar.="<td><h4>$currentDay</h4> <button class='btn-danger-no '></button>"; else: $calendar.="<td class='$today'><h4>$currentDay</h4> <a href=".BASE."/book/date/".$date." class='btn btn-success btn-xs'>Book</a>"; endif; $calendar .="</td>"; //Increment counters $currentDay++; $dayOfWeek++; endwhile; //Complete the row of the last week in month, if necessary if ($dayOfWeek != 7): $remainingDays = 7 - $dayOfWeek; for($l=0; $l < $remainingDays; $l++): $calendar .= "<td class='empty'></td>"; endfor; endif; $calendar .= "</tr>"; $calendar .= "</table>"; return $calendar; }  
    • By Rafael Massula
      Boa noite pessoal, 
      Tenho o seguinte código em .Net que faz a comparação de uma senha que foi criptografada e salva no banco com a senha comum que o usuário conhece. O algoritmo que desenvolvi foi esse da image.png porem preciso converter essa verificação para JavaScript pela seguinte necessidade, será uma aplicação em electron e ela poderá funcionar offline então não terei como mandar a verificação para o servidor. Existe alguma possibilidade? Desde já agradeço. 

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.