jQuery - Cricket Calculations

Question

Can somebody please help me on below jQuery?

I want to add player's toal runs, SR etc.. automatically based on Match 1 and Match 2 info

HTML

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th>Name</th>
    <th>Total Runs</th>
    <th>Total Balls</th>
    <th>Match 1 Runs</th>
    <th>Match 1 Balls</th>
    <th>Match 2 Runs</th>
    <th>Match 2 Balls</th>
    <th>Strite Rate</th>
  </tr>
  <tr>
    <td>Player 1</td>
    <td>Total Runs: <span class="player-stat-runs"></span></td>
    <td>Total Balls: <span class="player-stat-balls"></span></td>
    <td>15</td>
    <td>16</td>
    <td>20</td>
    <td>14</td>
    <td><span class="player-stat-avg"></span></td>
  </tr>
  <tr>
    <td>Player 2</td>
    <td>Total Runs: <span class="player-stat-runs"></span></td>
    <td>Total Balls: <span class="player-stat-balls"></span></td>
    <td>3</td>
    <td>4</td>
    <td>68</td>
    <td>94</td>
    <td><span class="player-stat-avg"></span></td>
  </tr>
</table>

CSS

table,th,td{border:1px solid #222;border-collapse:collapse;max-width:500px;}th{font-weight:bold;background:#efefef;}th,td{padding:5px;}

1. Total Runs by Player (Match 1 runs + Match 2 Runs)
2. Total Balls played by Player (Match 1 balls+ Match 2 balls)
3. Batsman Strike Rate (PS: if batsman scored 10 runs from 10 balls SR = 100.00)

Fiddle

Answer 1

You can put class attributes for runs and balls tds, so that you can easily figure out the tds for calculations. See below table

<table class="table table-bordered">
  <tr>
    <th>Name</th>
    <th>Total Runs</th>
    <th>Total Balls</th>
    <th>M1 Runs</th>
    <th>M1 Balls</th>
    <th>M2 Runs</th>
    <th>M2 Balls</th>
    <th>Strite Rate</th>
  </tr>
<tbody>
  <tr>
    <td>Player 1</td>
    <td class="totalRuns">Total Runs: <span class="player-stat-runs"></span></td>
    <td class="totalBalls">Total Balls: <span class="player-stat-balls"></span></td>
    <td class="runs">15</td>
    <td class="balls">16</td>
    <td class="runs">20</td>
    <td class="balls">14</td>
    <td class="strikeRate"><span class="player-stat-avg"></span></td>
  </tr>
  <tr>
    <td>Player 2</td>
    <td class="totalRuns">Runs: <span class="player-stat-runs"></span></td>
    <td class="totalBalls">Balls: <span class="player-stat-balls"></span></td>
    <td class="runs">3</td>
    <td class="balls">4</td>
    <td class="runs">68</td>
    <td class="balls">94</td>
    <td class="strikeRate"><span class="player-stat-avg"></span></td>
  </tr>
    </tbody>
</table>

Now, use below jQuery to calculate total runs, balls and strike rate

$(function(){
    $('table.table.table-bordered tbody tr').each(function(){
       var totalRuns = 0;
       var totalBalls = 0;
        $(this).find('.runs').each(function(){
        totalRuns += parseInt($(this).text());
        });

        $(this).find('.balls').each(function(){
        totalBalls += parseInt($(this).text());
        });

       $(this).find('.totalRuns .player-stat-runs').text(totalRuns); 
       $(this).find('.totalBalls .player-stat-balls').text(totalBalls);
       $(this).find('.strikeRate .player-stat-avg').text(parseInt(totalRuns/totalBalls*100)); 

    });
});

JSFiddle Demo