Add the columns of an HTML table with Javascript

Question

Add the columns of an HTML table with Javascript

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (0 votes)

1

I have a table obtained from the database which I am trying to add columns to Total. I show the image so that it can be understood:

HTML code

<table id="tblKardexValorizado" class="table table-striped table-bordered table-condensed table-hover" cellpadding="0" cellspacing="0" width="100%">
                <thead>
                    <tr class="encabezado">
                        <th>Sucursal</th>
                        <th>Articulo</th>
                        <th>Categoria</th>
                        <th>Unidad</th>
                        <th>Total de Ingresos</th>
                        <th>Valor de Ingresos</th>
                        <th>Total de Stock</th>
                        <th>Valor de Stock</th>
                        <th>Total de Ventas</th>
                        <th>Valor de Ventas</th>
                        <th>Utilidad Valorizada</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr class="total">
                        <th>Total</th>
                        <th>Total</th>
                        <th>Total</th>
                        <th>Total</th>
                        <th>Total </th>
                        <th>Total </th>
                        <th>Total </th>
                        <th>Total </th>
                        <th>Total </th>
                        <th>Total</th>
                        <th>Total</th>
                    </tr>
                </tfoot>

            </table>

javascript html

asked by Hakim 22.05.2018 в 20:08

source

4 answers

how can I compile all the jade files in a folder at the same time in windows? How to add Header to an Excel Report with PHP

score 0 · Answer 1

Try this Script, where i=5 represents the number of the column where it starts to add and 11 the final column that you want to add.

for(i=5;i<=11;i++)
{
  var total=0;
  $('table#tblKardexValorizado tbody td:nth-child(' + i + ')').each(function (index) 
  {
    total += parseFloat($(this).text());  
  });
  $('table#tblKardexValorizado tfoot th:nth-child(' + i + ')').text("Total: " + total)  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblKardexValorizado" class="table table-striped table-bordered table-condensed table-hover" cellpadding="0" cellspacing="0" width="100%">
    <thead>
        <tr class="encabezado">
            <th>Sucursal</th>
            <th>Articulo</th>
            <th>Categoria</th>
            <th>Unidad</th>
            <th>Total de Ingresos</th>
            <th>Valor de Ingresos</th>
            <th>Total de Stock</th>
            <th>Valor de Stock</th>
            <th>Total de Ventas</th>
            <th>Valor de Ventas</th>
            <th>Utilidad Valorizada</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>asdasdasd</td>
        <td>asdasdasd</td>
        <td>asdasdasd</td>
        <td>asdasdasd</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
      <tr>
        <td>asdasdasd</td>
        <td>asdasdasd</td>
        <td>asdasdasd</td>
        <td>asdasdasd</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
    </tbody>
    <tfoot>
        <tr class="total">
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th>Total </th>
            <th>Total </th>
            <th>Total </th>
            <th>Total </th>
            <th>Total </th>
            <th>Total</th>
            <th>Total</th>
        </tr>
    </tfoot>

</table>

score 0 · Answer 2

Using jQuery you should use each () and . eq ()

For example;

//Ejecuto la función al cargar la página
$(document).ready(function()
{
  //Defino los totales de mis 2 columnas en 0
  var total_col1 = 0;
  var total_col2 = 0;
  //Recorro todos los tr ubicados en el tbody
  $('#ejemplo tbody').find('tr').each(function (i, el) {
             
        //Voy incrementando las variables segun la fila ( .eq(0) representa la fila 1 )     
        total_col1 += parseFloat($(this).find('td').eq(0).text());
        total_col2 += parseFloat($(this).find('td').eq(1).text());
                
    });
    //Muestro el resultado en el th correspondiente a la columna
    $('#ejemplo tfoot tr th').eq(0).text("Total " + total_col1);
    $('#ejemplo tfoot tr th').eq(1).text("Total " + total_col2);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ejemplo" border="1">
    <thead>
        <tr class="encabezado">
            <th>Campo 1</th>
            <th>Campo 2</th>
        </tr>
    </thead>
    <tbody>
          <tr>
            <td>1</td>
            <td>5</td>
          </tr>
          <tr>
            <td>7</td>
            <td>1</td>
          </tr>
          <tr>
            <td>16</td>
            <td>1</td>
          </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Total</th>
            <th>Total</th>
        </tr>
    </tfoot>
</table>

I hope it's what you need! Greetings

score 0 · Answer 3

Weimar Yamit Moreno Thank you for the answer is exactly what I need, but in this case the rows are obtained from the database query so it can not be added with the mentioned function.

for(i=5;i<=11;i++)
{
  var total=0;
  $('table#tblKardexValorizado tbody td:nth-child(' + i + ')').each(function (index) 
  {
    total += parseFloat($(this).text());  
  });
  $('table#tblKardexValorizado tfoot th:nth-child(' + i + ')').text("Total: " + total)  
}

	<table id="tblKardexValorizado" class="table table-striped table-bordered table-condensed table-hover" cellpadding="0" cellspacing="0" width="100%">
                    <thead>
                        <tr class="encabezado">
                            <th>Sucursal</th>
                            <th>Articulo</th>
                            <th>Categoria</th>
                            <th>Unidad</th>
                            <th>Total de Ingresos</th>
                            <th>Valor de Ingresos</th>
                            <th>Total de Stock</th>
                            <th>Valor de Stock</th>
                            <th>Total de Ventas</th>
                            <th>Valor de Ventas</th>
                            <th>Utilidad Valorizada</th>
                        </tr>
                    </thead>
             
                    <tfoot>
                        <tr class="total">
                        	<th>Total</th>
                            <th>Total</th>
                            <th>Total</th>
                            <th>Total</th>
                            <th>Total </th>
                            <th>Total </th>
                            <th>Total </th>
                            <th>Total </th>
                            <th>Total </th>
                            <th>Total</th>
                            <th>Total</th>
                        </tr>
                    </tfoot>

                </table>

score 0 · Answer 4

works to list database table in java scrip

function ListadoKardexValorizado(){ 
    var idsucursal = $("#txtIdSucursal").val();
var tabla = $('#tblKardexValorizado').dataTable(
    {   "aProcessing": true,
        "aServerSide": true,
        dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
        "aoColumns":[                   
                {   "mDataProp": "0"},
                {   "mDataProp": "1"},
                {   "mDataProp": "2"},
                {   "mDataProp": "3"},
                {   "mDataProp": "4"},
                {   "mDataProp": "5"},
                {   "mDataProp": "6"},
                {   "mDataProp": "7"},
                {   "mDataProp": "8"},
                {   "mDataProp": "9"},
                {   "mDataProp": "10"},

        ],"ajax": 
            {
                url: './ajax/ConsultasComprasAjax.php?op=listKardexValorizado',
                type : "get",
                data:{idsucursal: idsucursal},
                dataType : "json",

                error: function(e){
                    console.log(e.responseText);    
                }
            },
        "bDestroy": true

    }).DataTable();

};