Вычесть из родительских строк

Я пытаюсь вычесть значение родительских строк заголовка (которые являются суммой их соответствующих дочерних строк), но он просто продолжает добавлять при отображении символа минус. Как вычесть?Вычесть из родительских строк

jsFiddle

HTML:

<table class="table"> 
    <tr class="parent-A"> 
     <td> 
      <h5>A</h5> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>A1</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="A" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="A" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="A" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>A2</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="A" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="A" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="A" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>A3</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="A" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="A" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="A" /> 
     </td> 
    </tr> 
    <tr class="parent-B"> 
     <td> 
      <h5>B</h5> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>B1</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="B" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="B" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="B" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>B2</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="B" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="B" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="B" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>B3</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="B" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="B" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="B" /> 
     </td> 
    </tr> 
    <tr class="total" data-par="A,B"> 
     <td colspan="2"> 
      <h4>Total A - B</h4> 

     </td> 
     <td colspan="2"> 
      <input type="text" /> 
     </td> 
     <td colspan="2"> 
      <input type="text" /> 
     </td> 
     <td> 
      <input type="text" /> 
     </td> 
    </tr> 
    <tr class="parent-C"> 
     <td> 
      <h5>C</h5> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>C1</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="C" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="C" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="C" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>C2</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="C" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="C" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="C" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>C3</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="C" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="C" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="C" /> 
     </td> 
    </tr> 
    <tr class="parent-D"> 
     <td> 
      <h5>D</h5> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>D1</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="D" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="D" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="D" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>D2</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="D" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="D" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="D" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <h6>D3</h6> 

     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="D" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="D" /> 
     </td> 
     <td>&nbsp;</td> 
     <td> 
      <input type="text" data-parent="D" /> 
     </td> 
    </tr> 
    <tr class="total" data-par="C,D"> 
     <td colspan="2"> 
      <h4>Total C - D</h4> 

     </td> 
     <td colspan="2"> 
      <input type="text" /> 
     </td> 
     <td colspan="2"> 
      <input type="text" /> 
     </td> 
     <td> 
      <input type="text" /> 
     </td> 
    </tr> 
</table>

JQuery:

$(function() { 
    $('[class*="parent-"] input').attr('readonly', true); 
    var total_par = $('tr.total'); 
    $('input[type=text]').on('blur', function() { 
     var totals = [0, 0, 0], 
      parent_name = $(this).data('parent'), 
      find_parent_row = $('tr.parent-' + parent_name); 
     find_parent_row.nextUntil('[class*="parent-"]').find('input').each(function() { 
      totals[$(this).parent('td').index()/2 - 1] += +this.value; 
     }); 
     find_parent_row.find('input').each(function (i) { 
      this.value = totals[i]; 
     }); 
     total_par.each(function() { 
      totals = [0, 0, 0]; 
      var par = $(this).data('par').split(','); 
      $('[data-parent="' + par[0] + '"]').add('[data-parent="' + par[1] + '"]').each(function() { 
       totals[$(this).parent('td').index()/2 - 1] -= this.value; //subtract doesn't seem to be working! 
      }); 
      $(this).find('input').val(function (i) { 
       return totals[i]; 
      }); 
     }); 
    }); 
});

источник

2013-12-10 input

fiddle Demo

HTML

<tr class="total" data-par="A,B"> <!-- for A-B --> 

<tr class="total" data-par="C,D"> <!-- for C-D -->

total_par.each(function() { 
    totals = [0, 0, 0]; 
    var par = $(this).data('par').split(','); // par[0] = A and par[1] = B 
    $('[data-parent="' + par[0] + '"]').each(function() { //for A 
     totals[$(this).parent('td').index()/2 - 1] += +this.value; // add all values 
    }); 
    $('[data-parent="' + par[1] + '"]').each(function() {//for B 
     totals[$(this).parent('td').index()/2 - 1] += -1 * +this.value;// subtract all values --> number is multiplied with -1 to make it negative and than added 
    }); 
    $(this).find('input').val(function (i) { 
     return totals[i]; //assign values to current input element inside class total 
    }); 
});

или

fiddle Demo

total_par.each(function() { 
    totals = [0, 0, 0]; 
    var par = $(this).data('par').split(','); 
    $('[data-parent="' + par[0] + '"]').each(function() { 
     totals[$(this).parent('td').index()/2 - 1] += +this.value; 
    }); 
    $('[data-parent="' + par[1] + '"]').each(function() { 
     totals[$(this).parent('td').index()/2 - 1] -= +this.value;// subtract all values 
    }); 
    $(this).find('input').val(function (i) { 
     return totals[i]; 
    }); 
});

fiddle Demo

find_parent_row.nextUntil('[class*="parent-"]').find('input[data-parent="' + parent_name + '"]').each(function() { 
    totals[$(this).parent('td').index()/2 - 1] += +this.value; 
});

добавил .find('input[data-parent="' + parent_name + '"]')

источник

2013-12-10 09:53:52

Спасибо за быстрый ответ. Но что, если у меня больше двух «данных-пар»? Например, если я хочу вычесть A, B и C? или A, B, C и D? Возможно ли это динамически (без жесткого кодирования A и B и т. Д.)? – input

Когда я ввожу значения для второго и третьего столбцов, значение первого столбца также изменяется. Пожалуйста, проверьте. – input

@input demo -> http://jsfiddle.net/cse_tushar/QAjaL/2 –

ответ

Смежные вопросы