Multiply rows of tables

Question

Multiply rows of tables

Navigation

#1 by (1 votes)

0

I made a table where on the labels

I can write numbers (to multiply them) and in another to show the result, it works only when I have a row

But if I add another row with its columns below, it does not show the result for each row

If you notice 14 * 13 = 182 and 13 * 2 = 26 It only shows me the result of the last operation

I would like you to help me to show the correct result of each multiplication in the result column, here I leave my code, thanks in advance and I hope it was clear since I am not good at explaining

HTML

<table  width="600" border="1" cellspacing="0" cellpadding="7"> 
 <tr class="tabla">
    <td >numero 1</td>
   <td >numero 2</td>
   <td>resultado</td>
 </tr>
 <tr class="tabla">
  <td id="" onkeyup="myFunction()" contenteditable></td>
 <td id="" onkeyup="myFunction()" contenteditable></td>
 <td class="total"></td>
</tr>

<tr class="tabla">
  <td id="" onkeyup="myFunction()" contenteditable></td>
 <td id="" onkeyup="myFunction()" contenteditable></td>
 <td class="total"></td>
</tr>

</table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
function myFunction() {    
    $('.tabla').each(function() {
        var _1 = $(this).find("td").eq(0).html();
        var _2 = $(this).find("td").eq(1).html();

        var _11=parseInt(_1);
        var _22=parseInt(_2);

  var total= _11 * _22 ;
  if( isNaN(total)){
    $('.total').html(0) ;
  }else{
    $('.total').html(total) ;
  }
    
  
  
 
});

}   
</script>

javascript jquery html

asked by Jhona JM 16.11.2018 в 17:19

source

1 answer

Attempt to read from field 'android.view.View android.support.v7.widget.RecyclerView $ ViewHolder.itemView' on a null object reference How to insert values from a dynamic table into the mysql database

score 1 · Accepted Answer

The problem is that you are going through all the td, you multiply the first and the second, but the result is shown in all the total of the table. With what he repeats and shows you will know which of all the multiplications.

Maybe applying in the following way

<table  width="600" border="1" cellspacing="0" cellpadding="7">
    <tr class="tabla">
        <td >numero 1</td>
        <td >numero 2</td>
        <td>resultado</td>
    </tr>
    <tr class="tabla" onkeyup="myFunction(this)">
        <td id=""  contenteditable>11</td>
        <td id="" contenteditable>12</td>
        <td class="total"></td>
    </tr>

    <tr class="tabla" onkeyup="myFunction(this)">
        <td id=""  contenteditable></td>
        <td id=""  contenteditable></td>
        <td class="total"></td>
    </tr>

</table>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
    function myFunction(o) {
/*        $('.tabla').each(function() {
            var _1 = $(this).find("td").eq(0).html();
            var _2 = $(this).find("td").eq(1).html();

            var _11=parseInt(_1);
            var _22=parseInt(_2);

            var total= _11 * _22 ;
            if( isNaN(total)){
                $('.total').html(0) ;
            }else{
                $('.total').html(total) ;
            }

        });*/
        var _tr = $(o);
        var _1 = _tr.find("td").eq(0).html();
        var _2 = _tr.find("td").eq(1).html();
        var _11=parseInt(_1);
        var _22=parseInt(_2);
        var total= _11 * _22 ;
        console.log(total);
        var _total = _tr.find("td").eq(2);
        if( isNaN(total)){
            _total.html(0) ;
        }else{
            _total.html(total) ;
        }

    }
</script>

I hope it serves you.