Question

我不确定我怎么能解决我的问题，但我有一个包含多个标题行及其各自子行的表。子行应该相加并设置标题行的值。我怎样才能有效地做到这一点？

<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，依此类推。

我能想到的一种方法就是这样：

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

        });

但是我必须为每个标题行多次执行此操作。还有更好的办法吗？

Answer 1

您可以使用data attributes。您可以在jQuery中使用.data访问这些内容。

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

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

希望这会有所帮助。

[编辑]：添加了示例

<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中：

    $('.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()));
    });

在表中添加行块的值

1 个答案: