DEV Community: Noé Melo Locumber

How to insert rows in an HTML table body in JavaScript

Noé Melo Locumber — Wed, 19 Feb 2020 19:11:19 +0000

HTML code of the table with a only row:



<table class="table" id="myTable">
   <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
    </tbody>
 </table>

Here JavaScript code:



    //data:
    var first_names = ['Jacob','Mark','Noé'];
    var last_names = ['Thornton','Otto', 'Melo'];
    var handle_names = ['@fat','@mdo','@noemelolocumber'];

    //get table body:
    var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

    for (let index = 0; index < first_names.length; index++){
        //insert Row
        tableRef.insertRow().innerHTML = 
        "<th scope='row'>" + (index + 2).toString()+ "</th>" + 
        "<td>" +first_names[index]+ "</td>"+
        "<td>" +last_names[index]+ "</td>"+
        "<td>" +handle_names[index]+ "</td>";
    }

output

How to save chart as image Chart.js

Noé Melo Locumber — Tue, 04 Feb 2020 18:21:45 +0000

HTML code:



<!-- Chart.js Object -->
<canvas id="lineChart" width="300" height="150"> </canvas>

<!-- Download Button
"download" attribute is very important:
<a download ="nameChart.jpg"></a> 
-->
<a id="download"
        download="ChartImage.jpg" 
        href=""
        class="btn btn-primary float-right bg-flat-color-1"
        title="Descargar Gráfico">

        <!-- Download Icon -->
 <i class="fa fa-download"></i>
 </a>

JavaScript code:



//Download Chart Image
document.getElementById("download").addEventListener('click', function(){
  /*Get image of canvas element*/
  var url_base64jp = document.getElementById("lineChart").toDataURL("image/jpg");
  /*get download button (tag: <a></a>) */
  var a =  document.getElementById("download");
  /*insert chart image url to download button (tag: <a></a>) */
  a.href = url_base64jp;
});

Example of Line Chart:

Full code in GitHub:

https://github.com/NoeMelo/Chart.js