How to add columns of an HTML Table?

Navigation
2

I just wanted to know how to add the columns, since I'm new and would like to know how to apply it with java script.

This is my function: 

<table id="tabla" class="table" style="width:51%;">   
    
     <thead>
      <tr>
        <th>letras</th>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <Th>E</Th>
         <Th>F</Th>
          <Th>H</Th>
      </tr>
       <tr>
    <td id="f1">a</td>
    <td id="f2" >1</td>
    <td id="f2">2</td>
    <td id="f2">3</td>
    <td id="f2">4</td>
    <td id="f2">5</td>
    <td id="f2">6</td>
    <td id="f2">7</td>
    </tr>

    <tr>
    <td id="f1">b</td>
    <td id="f2">1</td>
    <td id="f2">2</td>
    <td id="f2">3</td>
    <td id="f2">4</td>
    <td id="f2">5</td>
    <td id="f2">6</td>
    <td id="f2">7</td>
    </tr>

    <tr>  
    <td id="f1">c</td>
    <td id="f2">1</td>
    <td id="f2">2</td>
    <td id="f2">3</td>
    <td id="f2">4</td>
    <td id="f2">5</td>
    <td id="f2">6</td>
    <td id="f2">7</td>
    </tr>

     <tr>
      <td >su total:</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
     </tr>
     
     </thead>
  </table>
    
asked by Reinos Ric 29.08.2017 в 23:57
source

3 answers

4

You can use Jquery to go through the rows and accumulate the amount per column

This is my function: 

$(document).ready(function() {

 CalcularTotal();

});
function CalcularTotal()
{
var totals = [0, 0, 0, 0, 0, 0, 0, 0];
 var $filas= $("#tabla tr:not('.total, .encabezado')");

  $filas.each(function() {
    $(this).find('td').each(function(i) {
      if (i != 0)
        totals[i - 1] += parseInt($(this).html());
    });
  });
  $(".total td").each(function(i) {
    if (i != 0)
      $(this).html(totals[i - 1]);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tabla" class="table" style="width:51%;">

  <thead>
    <tr class="encabezado">
      <th>letras</th>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
      <th>H</th>
    </tr>
    <tr>
      <td id="f1">a</td>
      <td id="f2">1</td>
      <td id="f2">2</td>
      <td id="f2">3</td>
      <td id="f2">4</td>
      <td id="f2">5</td>
      <td id="f2">6</td>
      <td id="f2">7</td>
    </tr>

    <tr>
      <td id="f1">b</td>
      <td id="f2">1</td>
      <td id="f2">2</td>
      <td id="f2">3</td>
      <td id="f2">4</td>
      <td id="f2">5</td>
      <td id="f2">6</td>
      <td id="f2">7</td>
    </tr>

    <tr>
      <td id="f1">c</td>
      <td id="f2">1</td>
      <td id="f2">2</td>
      <td id="f2">3</td>
      <td id="f2">4</td>
      <td id="f2">5</td>
      <td id="f2">6</td>
      <td id="f2">7</td>
    </tr>

    <tr class="total">
      <td>su total:</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
    </tr>

  </thead>
</table>
    
answered by 30.08.2017 / 00:18
source
3

Explanation

Since you are starting this way of HTML I recommend you to learn about the Query Selectors and how they can be used, in this case I used a grouping by class for each column and its corresponding total.

In the code I first made an iteration on all the elements that belong to the Total class and besides that with more than 1 assigned class, this second class will be used to identify all the corresponding columns to add.

We do the second QuerySelector and this will return all the TD belonging to the class Column + letter will convert its string content to an integer and add it to a variable.

finally this sum will be set to the cell that is iterating the first for.

I hope my answer is helpful, greetings.

Code 

document.querySelectorAll('.Total').forEach(function (total) {
        if (total.classList.length > 1) {
            var letra = total.classList[1];
            var suma = 0;
            document.querySelectorAll('.Columna' + letra).forEach(function (celda) {
                var valor = parseInt(celda.innerHTML);
                suma += valor;
            });
            total.innerHTML = suma;
        }
    });
<table id="tabla" class="table" style="width:51%;">
    <thead>
        <tr>
            <th>letras</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <Th>E</Th>
            <Th>F</Th>
            <Th>H</Th>
        </tr>
        <tr>
            <td class="ColumnaLetra">a</td>
            <td class="ColumnaA">1</td>
            <td class="ColumnaB">2</td>
            <td class="ColumnaC">3</td>
            <td class="ColumnaD">4</td>
            <td class="ColumnaE">5</td>
            <td class="ColumnaF">6</td>
            <td class="ColumnaG">7</td>
        </tr>
        <tr>
            <td class="ColumnaLetra">b</td>
            <td class="ColumnaA">1</td>
            <td class="ColumnaB">2</td>
            <td class="ColumnaC">3</td>
            <td class="ColumnaD">4</td>
            <td class="ColumnaE">5</td>
            <td class="ColumnaF">6</td>
            <td class="ColumnaG">7</td>
        </tr>
        <tr>
            <td class="ColumnaLetra">c</td>
            <td class="ColumnaA">1</td>
            <td class="ColumnaB">2</td>
            <td class="ColumnaC">3</td>
            <td class="ColumnaD">4</td>
            <td class="ColumnaE">5</td>
            <td class="ColumnaF">6</td>
            <td class="ColumnaG">7</td>
        </tr>

        

        <tr>
            <td class="Total">Su total</td>
            <td class="Total A"></td>
            <td class="Total B"></td>
            <td class="Total C"></td>
            <td class="Total D"></td>
            <td class="Total E"></td>
            <td class="Total F"></td>
            <td class="Total G"></td>
        </tr>

    </thead>
</table>

References

I invite you to document with the following reference: link

    
answered by 30.08.2017 в 00:34
1

One quick way is to use Jquery, include it in <head> :     

we add class to <tr> to select them faster. The code would be: 

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        var totalA=0;
        var totalB=0;
        //repetir por columna, o usa un array
        $('.suma').map(function(k,v){
            totalA=totalA+parseInt($(this).children('td:eq(1)').text());
            totalB=totalB+parseInt($(this).children('td:eq(2)').text());
            //repetir por columna o llena un array
        })
        $('.total').children('td:eq(1)').text(totalA);
        $('.total').children('td:eq(2)').text(totalB);
    });
</script>
</head>
<body>
<table id="tabla" class="table" style="width:51%;">       
<thead>
<tr>
<th>letras</th>
<th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <Th>E</Th>
     <Th>F</Th>
      <Th>H</Th>
   </tr>
   </thead>
   <tr class="suma">
<td id="f1">a</td>
<td id="f2" >1</td>
<td id="f2">2</td>
<td id="f2">3</td>
<td id="f2">4</td>
<td id="f2">5</td>
<td id="f2">6</td>
<td id="f2">7</td>
</tr>

<tr class="suma">
<td id="f1">b</td>
<td id="f2">1</td>
<td id="f2">2</td>
<td id="f2">3</td>
<td id="f2">4</td>
<td id="f2">5</td>
<td id="f2">6</td>
<td id="f2">7</td>
</tr>

<tr class="suma">  
<td id="f1">c</td>
<td id="f2">1</td>
<td id="f2">2</td>
<td id="f2">3</td>
<td id="f2">4</td>
<td id="f2">5</td>
<td id="f2">6</td>
<td id="f2">7</td>
</tr>

 <tr class="total">
  <td >su total:</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
 </tr>

 </thead>

  

    
answered by 30.08.2017 в 00:30
Check if there is a comma and replace it with a period Override the value of a CSS property