表中行块的值的加法 [英] Addition of values of blocks of rows in table

问题描述

我不确定我应该如何构想我的问题，但是我有一个包含多个标题行及其各自的子行的表.子行应加起来并设置标题行的值.如何有效地做到这一点?

I'm not sure how else I could have framed my question, but I have a table with multiple header rows and their respective sub-rows. The sub-rows should add up and set the value of the header rows. How can I do this efficiently?

<table>
    <tr>
        <td>A</td> //header row
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td>A1</td> //sub-row
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td>A2</td> //sub-row
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td>B</td> //header row
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td>B1</td>//sub-row
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td>B2</td>//sub-row
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td>C</td> //header row
        <td><input type="text"/></td>
    </tr>
    <tr>
        <td>C1</td> //sub-row
        <td><input type="text"/></td>
    </tr>

</table>

子行A1 + A2应该设置A输入中的总数. B1 + B2应加到B，依此类推.

Sub row A1 + A2 should set the total in input of A. B1 + B2 should add up to B and so on.

我可以想到的一种方法是:

One way I can think of doing is this way:

<tr>
        <td>A</td> //header row
        <td><input type="text" id="a"/></td>
    </tr>
    <tr>
        <td>A1</td> //sub-row
        <td><input type="text" class="asub"/></td>
    </tr>
    <tr>
        <td>A2</td> //sub-row
        <td><input type="text" class="asub"/></td>
    </tr>


var finalresult = 0,
            $a = $('.asub'),
            $ares = $('#a');

        $.each($a, function(i) {
            var aVal = parseFloat( $a.eq(i).value() );

            if (aVal) {
                finalresult += aVal;
                $ares.val( finalresult ));
            }

        });

但是我必须为每个标题行多次执行此操作.有什么更好的方法吗?

But I'll have to do this multiple times for each header row. Is there any better way?

推荐答案

您可以使用数据属性.您可以在jQuery中使用 .data 来访问这些文件.

You could use the data attributes. You can access these with .data in jQuery.

输入元素可能是这样的<input type="text" data-parent="A" class="sub"/>.这样，您可以使用sub类循环元素，并读取父级以知道要增加哪个值.

An input element could be something like this <input type="text" data-parent="A" class="sub"/> . This way you can loop the elements with the sub class and read the parent to know which value to increase.

如果愿意，可以将data-parent属性放在<tr>或<td>标记上.

You can put the data-parent attribute on the <tr> or <td>tag if you like.

希望这会有所帮助.

:添加了示例

<tr class="parent-row">
    <td>A</td>
    <td><input type="text" value="0" id="A" /></td>
</tr>
<tr class="child-row">
    <td>A1</td>
    <td><input type="text" data-parent="#A" /></td>
</tr>
<tr class="child-row">
    <td>A2</td>
    <td><input type="text" data-parent="#A" /></td>
</tr>

在JavaScript中:

And in JavaScript:

    $('.child-row').each( function(i) {
        var input = $(this).find('input');
        var parent = input.attr('data-parent'); // Could use the [.data](http://api.jquery.com/data/) function.

        $(parent).val(parseFloat($(parent).val())+1);
        // If you need to add values of child-rows' input elements you could use the one below
        // $(parent).val(parseFloat($(parent).val())+parseFloat(input.val()));
    });

这篇关于表中行块的值的加法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！