CODEWITHSUNDEEP
javascriptjqueryhtmlwordpresshtml-table
Epleroma
Epleroma

Reputation: 153

Use Javascript to show the difference between two cells in an HTML table

This must be fairy simple but I am still quite new to JS and can't find a solution. Let's assume I have this table:

<table class="mytable">
   <tbody>
      <tr>
         <th>Price A</th>
         <th>Price B</th>
         <th>Up/Down Amount</th>
      </tr>
      <tr>
         <td>23.5</td>
         <td>90.6</td>
         <td>Difference</td>
      </tr>
   </tbody>
</table>

  1. How would I get JS to show the difference between priceA and PriceB and color it red or green depending on whether B is higher or lower?

  2. If One of the numerical values is generated by a shortcode (wordpress) how do I get the JS to parse it? I have tried $(window).on("load", function(){ .. but it did not work on other tables I have tested*

    • Fiddle of this table (color cell based on value being lower than another cell) it works here but I could NOT get it to Function in Wordpress at all.

Any help is would be hugely appreciated.

Upvotes: 0

Views: 2809

Answers (4)

Solomon Closson
Solomon Closson

Reputation: 6217

jQuery:

$(".mytable tr").not(":first").each(function() {
    var td1 = parseFloat($(this).children("td.pricea").text()),
        td2 = parseFloat($(this).children("td.priceb").text()),
        difference = (td1 - td2),
        absNum = Math.abs(difference),
        largerNum = td1 > td2 ? td1 : td2,
        percentage = ((absNum / largerNum) * 100).toFixed(2);

    if (difference < 0)
       $(this).children("td.out").text(percentage).addClass("green");
    else
        $(this).children("td.out").text(percentage).addClass("red");
});

CSS:

table td {padding: 5px;}
.green {
    background-color: #C8FDD3;
}
.red {
    background-color: #FDC8C8;
}

.pricea:before {
   content: "$";
}

.priceb:before {
   content: "$";
}
.out:after {
   content: "%";
}

jsFiddle

To get the difference percentage of 2 numbers, you take the difference, divide it by larger number, and multiply by 100.

If this answers your question, please mark it as the answer.

Upvotes: 1

Voonic
Voonic

Reputation: 4785

call this function on window.onload or any other event, check this demo fiddle

function cal()
{
 var ele = document.getElementsByTagName('tr');
 for(var i=0;i<ele.length;i++)
 {
   var tds = ele[i].getElementsByTagName('td');

     var td1 = parseInt(tds[0].innerHTML);
     var td2 = parseInt(tds[1].innerHTML);
     tds[2].innerHTML = td2-td1;
     if(td1>td2)
     tds[0].style.backgroundColor = "green";
     else
     tds[1].style.backgroundColor = "green";

 }
}

Upvotes: 0

Arvind Bhardwaj
Arvind Bhardwaj

Reputation: 5291

$(document).ready(function() {
    $(".mytable").find("tr").each(function() {
        var price_a = parseFloat($(this).find("td:nth-child(1)").text());
        var price_b = parseFloat($(this).find("td:nth-child(2)").text());
        var diff = price_a - price_b;
        var $res = $(this).find("td:nth-child(3)");
        $res.text(diff);
        if (diff < 0) {
            $res.css("backgroundColor", "red");
        } else {
            $res.css("backgroundColor", "green");
        }
    });
});

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10378

see demo here

$(".colorMe tr").each(function() {
    if (($(this).find("td:eq(0)").text()-$(this).find("td:eq(1)").text())>0)
    {
            $(this).css("background","red");

    }
    else{
    $(this).css("background","green");
    }

});

Upvotes: 0

Related Questions