Javascript и Ajax в каждой строке 3 разных итоговых вычисления не работают должным образом

Question

Вот скрипт, используемый библиотекой ajax и javascript.

Столбец общей суммы заказа Работает нормально.Но общие вычисления для столбца скидок и столбца чистой цены не работают должным образом.

<script type="text/javascript">
$(document).ready(function() {
    $('.row1').keyup(function(ev){

        var row1c = $(this).val() * 25;
        $('.row1c').html((row1c).toFixed(2));

    });
    $('.row1a').keyup(function(ev){

        var row1ac = $(this).val() * 15;
        $('.row1ac').html((row1ac).toFixed(2));

    });
    $('.row1b').keyup(function(ev){

        var row1bc = $(this).val() * 10;
        $('.row1bc').html((row1bc).toFixed(2));

    });

   $('.row2').keyup(function(ev){

        var row2c = $(this).val() * 45;
        $('.row2c').html((row2c).toFixed(2));

    });
    $('.row2a').keyup(function(ev){

        var row2ac = $(this).val() * 25;
        $('.row2ac').html((row2ac).toFixed(2));

    });
    $('.row2b').keyup(function(ev){

        var row2bc = $(this).val() * 20;
        $('.row2bc').html((row2bc).toFixed(2));

    });
  $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().find('span').text());
    })
    $('.row5c').text(total.toFixed(2));
  })


  $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().find('span').text());
    })
    $('.row55c').text(total.toFixed(2));
  })
   $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().find('span').text());
    })
    $('.row555c').text(total.toFixed(2));
  })
});


</script>

<table border="2" cellpadding="5" cellspacing="2" align="center">


  <tr>
    <th>Cracker Name</th>
    <th>Cracker Photo</th>
    <th>Packing Model</th>
    <th>Retail Price</th>
    <th>You Save (Discount - 60%) <br /></th>

    <th>Selling Price<br /></th>

    <th>Quantity</th>
    <th>Total Order</th>
    <th>Discount</th>
    <th>Net Price</th>
  </tr>


  <tr>
    <td>3.5'' Laxmi</td>
    <td>--</td>
    <td>5 in 1 Packet</td>
    <td>25</td>
    <td>15</td>
    <td>10</td>
    <td>
      <input type="text" name="pages" class="row1 row1a row1b" />    </td>
    <td><span class="row1c">0.00</span>    </td>
      <td><span class="row1ac">0.00</span>    </td>
        <td><span class="row1bc">0.00</span>    </td>
  </tr>
  <tr>
    <td>3.5'' Laxmi</td>
    <td>--</td>
    <td>5 in 1 Packet</td>
    <td>45</td>
    <td>25</td>
    <td>20</td>
    <td>
      <input type="text" name="pages" class="row2 row2a row2b" />    </td>
    <td><span class="row2c">0.00</span>    </td>
      <td><span class="row2ac">0.00</span>    </td>
        <td><span class="row2bc">0.00</span>    </td>
  </tr>






  <tr>
    <td colspan="7" align="right">Total  </td>

    <td><span class="row5c">0.00</span>    </td>
     <td><span class="row55c">0.00</span>    </td>
      <td><span class="row555c">0.00</span>    </td>
  </tr>
</table>

Answer 1

Назначьте классы своим элементам, как показано ниже:

<td><input type="text" name="pages" class="row1 row1a row1b" /></td>
<td><span class="row1c total1">0.00</span></td>
<td><span class="row1ac total2">0.00</span></td>
<td><span class="row1bc  tota3">0.00</span></td>

И

<td><input type="text" name="pages" class="row2 row2a row2b" /></td>
<td><span class="row2c total1">0.00</span></td>
<td><span class="row2ac total2">0.00</span></td>
<td><span class="row2bc tota3">0.00</span></td>

Функции для вычисления итогов должны выглядеть следующим образом:

$('input[type=text]').keyup(function() {
    var total = 0;
    $('.total1').each(function() {
        total += Number($(this).text());
    })
    $('.row5c').text(total.toFixed(2));
});

$('input[type=text]').keyup(function() {
    var total = 0;
    $('.total2').each(function() {
        total += Number($(this).text());
    })
    $('.row55c').text(total.toFixed(2));
});
$('input[type=text]').keyup(function() {
    var total = 0;
    $('total3').each(function() {
        total += Number($(this).text());
    })
    $('.row555c').text(total.toFixed(2));
});

Answer 2

Обновите свой СЦЕНАРИЙ с помощью приведенного ниже кода.

$(document).ready(function() {
    $('.row1').keyup(function(ev){

        var row1c = $(this).val() * 25;
        $('.row1c').html((row1c).toFixed(2));

    });
    $('.row1a').keyup(function(ev){

        var row1ac = $(this).val() * 15;
        $('.row1ac').html((row1ac).toFixed(2));

    });
    $('.row1b').keyup(function(ev){

        var row1bc = $(this).val() * 10;
        $('.row1bc').html((row1bc).toFixed(2));

    });

   $('.row2').keyup(function(ev){

        var row2c = $(this).val() * 45;
        $('.row2c').html((row2c).toFixed(2));

    });
    $('.row2a').keyup(function(ev){

        var row2ac = $(this).val() * 25;
        $('.row2ac').html((row2ac).toFixed(2));

    });
    $('.row2b').keyup(function(ev){

        var row2bc = $(this).val() * 20;
        $('.row2bc').html((row2bc).toFixed(2));

    });
  $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().find('span').text());
    })
    $('.row5c').text(total.toFixed(2));
  })


  $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().next().find('span').text());
    })
    $('.row55c').text(total.toFixed(2));
  })
   $('input[type=text]').keyup(function(){
    var total = 0;
    $('input[type=text]').each(function(){
      total += Number($(this).parent().next().next().next().find('span').text());
    })
    $('.row555c').text(total.toFixed(2));
  })
});

только что изменили две строки для скидки:

total += Number($(this).parent().next().next().find('span').text());

и всего нетто

Number($(this).parent().next().next().next().find('span').text());

DEMO