jquery obtiene el valor de las celdas de la tabla en la columna, agrega valores y genera en la página

Esta puede parecer una pregunta un poco extraña, y no estoy seguro de si es posible.

Creé una tabla HTML en wordpress y construí un bucle PHP para generar datos de publicación en formato de tabla.

Estoy usando esto Complemento ordenado de tabla jQuery para que sea una tabla ordenable.

Pero mi pregunta es, ¿es posible usar jQuery para sumar todos los valores numéricos en mi tabla? <th>Hours</th> columna y mostrar el resultado?

Si es necesario agregar una clase al <td><?php echo get_post_meta($post->ID, 'Labour Time Hours', true); ?></td> cell entonces eso está bien, no afectará al clasificador de tablas.

Luego me gustaría mostrar el resultado en la celda de pie de página de mi tabla.

es posible? Parece que no puedo encontrar nada en Google, pero probablemente estoy buscando el término incorrecto.

Muchas Gracias

MI CONTENIDO DE LA TABLA DE GENERACIÓN DE LOOP DE WORDPRESS

<?php 

        $data = new WP_Query(array(

        'post_type'         => 'job',
        'order'             => 'ASC',
        'posts_per_page'    => -1,
        'orderby'           => 'date'

)); ?>

<?php if ($data->have_posts()) : ?>

<table id="myTable" class="tablesorter"> 

    <thead> 

        <tr> 

            <th>Date</th> 
            <th>Job Title</th> 
            <th>Category</th> 
            <th>Hours</th> 

        </tr> 

    </thead> 

    <tbody> 

        <?php while ($data->have_posts()) : $data->the_post(); ?>

        <tr> 

            <td><?php the_time('Y/m/d'); ?></td> 
            <td><a href="<?php the_permalink() ?>" title="View Job" ><?php the_title(); ?></a></td> 
            <td><?php the_category(', ') ?></td> 
            <td><?php echo get_post_meta($post->ID, 'Labour Time Hours', true); ?></td> 

        </tr> 

        <?php endwhile; ?>

    </tbody>

    <tfoot>

        <tr>

            <td></td>
            <td></td>
            <td></td>
            <td><!-- Total to go here --></td>

        </tr>

    </tfoot>

</table>

<?php unset($data); endif; wp_reset_query(); ?>

preguntado el 12 de junio de 12 a las 18:06

4 Respuestas

Una forma sencilla de hacerlo sería asignar una clase a los elementos que desea sumar.

Entonces harías algo como esto:

<td class="add">5</td>
<td class="add">8</td>
<td id="Total"></td>

Luego, si está absolutamente seguro de que estos valores siempre serán enteros (o flotantes), puede hacer esto

function adding() {
    var total = 0;
    $(".add").each(function(index, element) {
        total += parseInt($(element).text());
    });
    $("#Total").text(total);
}

Respondido el 12 de junio de 12 a las 19:06

Gracias, este método parece muy sencillo, y puedo ver lo que hace el script, pero extrañamente no se genera nada. Haré un violín y te responderé. - jose

Puedes hacer esto con jQuery bastante simple:

var $table = $('#myTable'),
    $tr = $table.find('tbody tr'),
    totalHours = 0;

$tr.each(function(i, el){
    totalHours += parseInt($(this).find('td:last').html() || 0, 10);
});

$table.find('tfoot td:last').html(totalHours);

Ver demo

Respondido el 13 de junio de 12 a las 17:06

Esto parece genial, debería ser una copia directa y pasada de esto y funcionará en mi ciclo. Sin embargo, solo obtengo NaN como resultado. Crearé un violín replicando mi tabla y de vuelta a ti. Gracias - jose

Una posible razón para el NaN podría ser que uno de los valores que está analizando es una cadena vacía. Podrías manejar eso por var hours = parseInt($(this).find('td:last').html(), 10); totalHours += isNaN(hours) ? 0 : hours; - Christoffer Lette

Actualizado con corrección para ese caso de uso. - mVChr

Es mejor agregar en el servidor imo, pero puedes hacer esto:

var total = 0;

 $("td.whateverClass").each(function () 
    { 
        total += $(this).text();

    }

Respondido el 12 de junio de 12 a las 19:06

Gracias. Realmente no puedo ver lo que está sucediendo aquí, ¿el total de var es mi resultado? ¿Debería poder usar el var total para colocar esto en mi celda total? - jose

Agregar la clase hours a sus respectivas celdas de la tabla <td class='hours></td>'

Entonces puedes jQuery de esta manera.

var sum = 0;

luego

$('tbody td.hours').each(function(index, td)) { sum += parseInt(td.html()); });

y finalmente

$('tfoot td.hours').html(sum);

Respondido el 12 de junio de 12 a las 19:06

Gracias, aunque parece obtener un error de análisis: dice token adicional pero no lo hay. Parece que hay un extra) después de ..index, td)) pero si lo elimino, todavía arroja un error de forma extraña. Te responderé con un violín - jose

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.