JQuery - Calculate the sum of two numbers in a td and display in the new td?

advertisements

Hello Stackoverflowers,

I have this code:

    <table class="table">
        <tbody>
            <tr>
                <td><a href="#">New thing</a></td>
                <td>2017/06/04 08:00</td>
                <td><a href="#">One Thing</a><span>Another thing</span></td>
                <td class="random">R</td>
                <td><a href="#">12-11      </a></td>
            </tr>
            <tr>
                <td><a href="#">New thing</a></td>
                <td>2017/06/04 08:00</td>
                <td><a href="#">One Thing</a><span>Another thing</span></td>
                <td class="random">R</td>
                <td><a href="#">22-23      </a></td>
            </tr>
        </tbody>
    </table>

In the result I want to use jQuery to get a sum of numbers inside last table TD and display it into new TD. Like in the following code:

<table class="table">
    <tbody>
        <tr>
            <td><a href="#">New thing</a></td>
            <td>2017/06/04 08:00</td>
            <td><a href="#">One Thing</a><span>Another thing</span></td>
            <td class="random">R</td>
            <td><a href="#">12-11      </a></td>
            <td>[ 23 ]</td>
        </tr>
        <tr>
            <td><a href="#">New thing</a></td>
            <td>2017/06/04 08:00</td>
            <td><a href="#">One Thing</a><span>Another thing</span></td>
            <td class="random">R</td>
            <td><a href="#">22-23      </a></td>
            <td>[ 45 ]</td>
        </tr>
    </tbody>
</table>

thank you in advance.


  1. use .each() to iterate all tr
  2. use .text() to get the text
  3. use .append() to write new td at last of tr
  4. Use parseInt() or parseFloat() or Number() depending on needs
//iterate all tr in table
$('.table tr').each(function() {
  // using this context to point to each tr get the last td using .last().
  // use .text() to get its text
  var tdval = $(this).find('td').last().text();

  // use split and get the first value using index 0
  var first = parseInt(tdval.split('-')[0])

  // use split and get the second value using index 1
  var second = parseInt(tdval.split('-')[1])

  // use append to append the td where you will show the sum of two number.
  // append will put the td in last
  $(this).append("<td>" + (first + second) + "</td>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <td><a href="#">New thing</a></td>
      <td>2017/06/04 08:00</td>
      <td><a href="#">One Thing</a><span>Another thing</span></td>
      <td class="random">R</td>
      <td><a href="#">12-11      </a></td>
    </tr>
    <tr>
      <td><a href="#">New thing</a></td>
      <td>2017/06/04 08:00</td>
      <td><a href="#">One Thing</a><span>Another thing</span></td>
      <td class="random">R</td>
      <td><a href="#">22-23      </a></td>
    </tr>
  </tbody>
</table>