1

Tengo la sienguiente tabla que se llena al realizar una fórmula introducir la descripción de la imagen aquí

Lo que debo hacer es que al darle clic en un botón para exportar me cree un json con el código y la cantidad, y se lo pongo a una función. Esto es lo que tengo:

$(document).ready(function(){
  $('.exportar').click(function(){

    var imgData = canvas = document.getElementById($(this).attr('rel')).toDataURL("image/png");
    var pdf = new jsPDF;
    pdf.addImage(imgData, 'PNG', 10, 10);
    var download = $('.exportar');
     pdf.save("download.pdf");   

      jsonObj = [];
      $("table[class=rc]").each(function(){
        var id = $(this).attr('.muestra');
        var codigo = $(this).val();

        item = {}
        item [".muestra"] = id;
        item [".codpex"] = codigo;
        jsonObj.push(item);
      });
      console.log(jsonObj);

  var scope = window.parent.angular.element(window.frameElement).scope();
  scope.$ctrl.procesarLineas(jsonObj);
  scope.$apply();
  });
});

muestra es la clase del campo código y codepex el la clase de cantidad.

asi es la tabla

**<table class="rc">
<tr>
    <th >Código</th>
    <th >Cantidad</th>
</tr>
<tbody>
<tr>
<td  id='codpcentral' class='codpcentralx'></td> 
<td  id='npcentral' class='npcentralx'></td>
</tr>
</tbody>
</table>**
2
  • 1
    te recomiendo crear un string del objeto y luego utilizar la función JSON.parse() para convertir en objeto JSON, ej: var oJSON=JSON.parse('{"id":"0001"}')
    – fwBasic
    el 17 abr. 2017 a las 19:02
  • A lo expresado por fwBasic; añado sería mires que este obteniendo bien el dato; no veo (directamente) que te ocurre (falla 'cual?, datos vacios/undefined,..); te comento salvo el "$("table[class=rc]")" te devuelva cada "tr" del "tbody" de la tabla hasta ahí "bien" (creo) pero el "attr(".muestra")" y el "$(this).val()" me parece no hacen referencia a ninguna celda (TD) de la tabla. Añade código html del TABLE al menos uno o dos reglones depues del encabezado (lo que esta en negrillas).
    – user34391
    el 17 abr. 2017 a las 19:26

2 respuestas 2

1

el siguiente código muestra como convertir una tabla a un objeto JSON:

var json="";
$(document).ready(function () {
 $("#export").on("click",function () {
  $("table tbody tr").each(function () {
   json ="";
   $(this).find("td").each(function () {
    $this=$(this);
      json+=',"'+$this.attr("class")+'":"'+$this.html()+'"'
   });
   obj=JSON.parse('{'+json.substr(1)+'}');
   console.log(obj);
  });
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="rc">
 <thead>
  <tr>
   <th>Código</th>
   <th>Cantidad</th>
 </tr>
 </thead>
 <tbody>
  <tr>
   <td class='codigo'>1</td> 
   <td class='numero'>10</td>
  </tr>
  <tr>
   <td class='codigo'>2</td> 
   <td class='numero'>20</td>
  </tr>
  <tr>
   <td class='codigo'>3</td> 
   <td class='numero'>30</td>
  </tr>
 </tbody>
</table>
<button id="export">Exportar</button>

1

Un ejemplo de como acceder al contenido de cada celda de la tabla conforme a la estructura que pusiste puedes verlo aquí realizado

Enfocándome solo a la parte JavaScript<->jQuery prueba lo siguiente:

$(document).ready(function(){
  $('.exportar').click(function(){

    var imgData = canvas = document.getElementById($(this).attr('rel')).toDataURL("image/png");
    var pdf = new jsPDF;
    pdf.addImage(imgData, 'PNG', 10, 10);
    var download = $('.exportar');
     pdf.save("download.pdf");   

      jsonObj = [];
      $("table tbody tr").each(function(){
        var elitem ="{\"muestra\": " + $('.codpcentralx', this).html() + ", \"codpec\": " + $('.npcentralx', this).html() + "}";
        jsonObj.push(JSON.parse(elitem));
      });
      <!-- como tu petición es del JSON lo demás fuera del "each" a los "TR" del Table no son parte de la respuesta ni evalue -->
      console.log(jsonObj);

  var scope = window.parent.angular.element(window.frameElement).scope();
  scope.$ctrl.procesarLineas(jsonObj);
  scope.$apply();
  });
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.