jquery获取列中表格单元格的值,将值一起添加并在页面上输出

时间:2012-06-12 17:54:06

标签: jquery add

这可能看起来有点奇怪,我不确定是否可能。

我在wordpress中创建了一个HTML表,并构建了一个PHP循环来以表格格式输出后期数据。

我正在使用此jQuery table sorted plugin使其成为可排序的表格。

但我的问题是,是否可以使用jQuery在表<th>Hours</th>列中添加所有数值并输出结果?

如果一个类需要添加到<td><?php echo get_post_meta($post->ID, 'Labour Time Hours', true); ?></td>单元格那么这很酷,它不会影响tableorter。

然后我想在表格页脚单元格中输出结果。

这可能吗?我似乎无法在谷歌上找到任何东西,但我可能会搜索错误的术语。

由于

我的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(); ?>

4 个答案:

答案 0 :(得分:2)

执行此操作的简单方法是将类分配给要添加的元素。

所以你会做这样的事情:

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

然后,如果你绝对肯定这些值将始终是整数(或浮点数),你可以这样做

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

答案 1 :(得分:1)

你可以用一些相当简单的jQuery来做到这一点:

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);

See demo

答案 2 :(得分:0)

最好在服务器上添加imo,但你可以这样做:

var total = 0;

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

    }

答案 3 :(得分:0)

将班级hours添加到相应的表格单元格<td class='hours></td>'

然后你可以像这样jQuery。

var sum = 0;

然后

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

最后

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