JSFiddle - React, Tailwind, and code Playground

by pedrohsdeus

HTML

<p style='padding:17px; background-color:orange; color:white'>Invoice</p><br/>
<table id="customers">
  <tr>
    <th>Item</th>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
     <th>Total</th>
  </tr>
  <tr>
    <td>15151</td>
    <td>3mm machine screw</td>
    <td class='price'>0.12</td>
    <td class='qtde'>1000</td>
    <td class='total'></td>
  </tr>
  <tr>
    <td>10000</td>
    <td>Iron Solder</td>
    <td class='price'>12</td>
    <td class='qtde'>2</td>
    <td class='total'></td>
  </tr>
  <tr>
    <td>0001</td>
    <td>ABS Pipe 3/4"</td>
    <td class='price'>5.3</td>
    <td class='qtde'>20</td>
    <td class='total'></td>
  </tr>
  <tr>
    <td>051</td>
    <td>Paint Solvent</td>
    <td class='price'>25.3</td>
    <td class='qtde'>2</td>
    <td class='total'></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td >Total</td>
    <td class='iTotal'></td>
  </tr>

</table>

CSS

#customers {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #f2f2f2;}

#customers tr:hover {background-color: #ddd;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

JavaScript

//iTotal = invoice Total

var price = document.querySelectorAll(".price");
var qtde = document.querySelectorAll(".qtde");
var total  =  document.querySelectorAll(".total");
let itotal=0;
/* window.alert(price.length+' , '+qtde.length+' , '+total.length);
 */var res = 0;

  for (var i = 0; i < price.length; i++)
  {
      total[i].innerText+=' '+ 
      parseFloat((price[i].innerText*qtde[i].innerText));
      itotal +=parseFloat((price[i].innerText*qtde[i].innerText));
  }
  
 window.alert(itotal);
 
 var cells = document.getElementsByClassName('iTotal');
 cells[0].innerHTML=itotal;