获取数据属性值并设置对应元素的值答案

【问题标题】：Get data attribute value and set the value of the corresponding element获取数据属性值并设置对应元素的值
【发布时间】：2013-12-04 19:35:45
【问题描述】：

作为this question 的后续行动并基于the answer，我做了这样的事情：http://jsfiddle.net/9r79f/1/

HTML：

<table>
    <tr>
        <td></td>
        <td>Title</td>
        <td>Title1</td>
        <td>Title2</td>
    </tr>
    <tr>
        <td>A</td> 
        <td><input type="text" /></td>
        <td><input type="text" /></td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td>A1</td>
        <td><input type="text" class="sub" data-parent="A"/></td>
        <td><input type="text" class="sub" data-parent="A" /></td>
        <td><input type="text" class="sub" data-parent="A" /></td>
    </tr>
    <tr>
        <td>A2</td> 
        <td><input type="text" class="sub" data-parent="A"/></td>
        <td><input type="text" class="sub" data-parent="A"/></td>
        <td><input type="text" class="sub" data-parent="A" /></td>
    </tr>
    <tr>
        <td>B</td> 
        <td><input type="text" /></td>
        <td><input type="text" /></td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td>B1</td>
        <td><input type="text" class="sub" data-parent="B"/></td>
        <td><input type="text" class="sub" data-parent="B" /></td>
        <td><input type="text" class="sub" data-parent="B" /></td>
    </tr>
    <tr>
        <td>B2</td> 
        <td><input type="text" class="sub" data-parent="B"/></td>
        <td><input type="text" class="sub" data-parent="B"/></td>
        <td><input type="text" class="sub" data-parent="B" /></td>
    </tr>
</table>

jQuery:

$('input[type=text]').on('blur', function() {
        //alert($(this).val());
        calcA($(this));
});

function calcA(param){
        var finalresult = 0,
            $sub = param,
            $value = param.data('parent');

        $.each($sub, function(i) {
            var fiVal = parseFloat( $sub.eq(i).val() );

            if (fiVal) {
                finalresult += fiVal;
                $value.val( finalresult );
            }

        });
}

如何在不重复代码的情况下使用data属性将A1+A2中第一行的值设置为A中输入的第一行？并为B 等做同样的事情？

【问题讨论】：

我知道这不能回答您的问题，但 $.each 的上下文是当前项目。除了使用$sub.eq(i).val()，您可以使用this.value 来避免多余的jQuery 调用。
感谢您指出这一点！
没问题。抱歉，我无法回答您的问题。我没有使用足够的数据属性来提供帮助。
数据属性解决方案是有人在我之前的相关问题中提出的。如果我可以在没有数据属性的情况下将值添加到标题行并且不重复多行，那么我不介意使用该解决方案。
@scrowler，我得到了data-parent 的值，即A，但是如何将子行的总值（A1 + A2）设置为标题行 A 中的相应输入。我迷路了。 $value.val() 不正确，因为 Firebug 显示 $value.val() is not a function。

标签： jquery html addition

【解决方案1】：

您可以执行以下任一操作来获取data-parent 属性：

var data_parent_value = $(param).attr('data-parent'); // A or undefined

在此 JSFiddle 中查看您的控制台：http://jsfiddle.net/9r79f/2/

【讨论】：

我得到了data-parent 的值，即A，但是如何将子行的总值（A1 + A2）设置为相应的输入标题行A。我迷路了。 $value.val() 不正确，因为 Firebug 显示 $value.val() is not a function。
感谢您的指导。