Добавление значений блоков строк в таблице

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. Вы можете получить доступ к ним с помощью .data в jQuery.

Элемент ввода может быть примерно таким: <input type="text" data-parent="A" class="sub"/>. Таким образом, вы можете зацикливать элементы с классом sub и прочитать родителя, чтобы узнать, какое значение увеличить.

Вы можете поместить атрибут data-parent на тег <tr> или <td>, если хотите.

Надеюсь, это помогло.

[EDIT]: Добавлен пример

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