0

これは非常に単純なはずですが、私はまだ JS に慣れていないため、解決策を見つけることができません。次のテーブルがあるとします。

<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. JS に priceA と PriceB の差を表示させ、B が高いか低いかに応じて赤または緑に色付けするにはどうすればよいですか?

  2. 数値の 1 つがショートコード (ワードプレス) によって生成された場合、JS にそれを解析させるにはどうすればよいですか? 試してみ$(window).on("load", function(){ ..ましたが、テストした他のテーブルでは機能しませんでした*

    • このテーブルのフィドル（別のセルよりも低い値に基づいてセルに色を付ける）はここで機能しますが、Wordpressで機能することはできませんでした。

どんな助けでも大歓迎です。

4

4 に答える 4

1

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: "%";
}

jsフィドル

2 つの数値の差のパーセンテージを取得するには、差を取り、大きい数値で割り、100 を掛けます。

これがあなたの質問に答えている場合は、回答としてマークしてください。

于 2013-09-11T07:32:18.013 に答える
0

ここでデモを見る

$(".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");
    }

});
于 2013-09-11T07:02:24.403 に答える
0

window.onload またはその他のイベントでこの関数を呼び出し、このデモフィドルを確認してください

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";

 }
}
于 2013-09-11T07:02:53.813 に答える
0 
$(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");
        }
    });
});
于 2013-09-11T07:06:29.527 に答える