Question

我试图在bgcolor内<td>取决于条件

$.each(data, function(key, val) {
   $('.asoy').append('<tbody><tr><td>' + (angka++) + '</td> <td>' + val.transdate + '</td>' + '<td class="satu">' + val.salespos + '</td><td class="dua">' + val.omset + '</td><td class="dynamic"></td> </tr></tbody>');
   if ($(".satu").text() == $(".dua").text()) {
     $(".dynamic").css('background-color', 'red');
   } else {
     $(".dynamic").css('background-color', 'green');
   }
 });

这是我的HTML

<table class="asoy table table-bordered table-hover">
  <thead>
    <tr>
      <td>No</td>
      <td>Omset</td>
      <td>Sales XML</td>
      <td>Tanggal</td>
      <td>Status</td>
    </tr>
  </thead>
</table>

上面的我的脚本我只得到green我尝试.html()和.val()它没有帮助。抱歉我的英语不好。

我的小提琴https://jsfiddle.net/hku73vs2/

Answer 1

在添加多行时，需要限制jquery选择器的范围

$(".satu")会找到所有.satu，而不只是当前行的一个（tbody追加除外） - 而$(".satu").text()每次都会给出第一行的文字

要获取当前的html，请将append反转为appendTo，即更改：

var html = '<tr><td>' + (angka++) + '</td> <td>' ...
$(".asoy").append(html)

为：

var html = '<tr><td>' + (angka++) + '</td> <td>' ...
var row = $(html).appendTo(".asoy");

然后你可以使用行：

if ($(".satu", row).text() == $(".dua", row).text())
    $(".dynamic", row).css('background-color', 'red');

更新了小提琴：https://jsfiddle.net/hku73vs2/1/

或者，您可以直接使用数据并忘记jquery：

var color = "green";
if (val.salespos == val.omset)
    color = "red";

$.each(data, function(key, val) {
    $('.asoy').append('....<td class="dynamic" style="background-color:' + color + '"></td></tr>');

（顺便说一句，您也可以使用类和addClass而不是更改样式）

Answer 2

也可以尝试：

var htmloutp = '';

$.each(data, function(key, val){
    htmloutp += '<tr><td>'+ (angka++) +'</td> <td>' + val.transdate + '</td>' + '<td class="satu">' + val.salespos + '</td><td class="dua">' + val.omset + '</td><td class="dynamic" style="background-color : ' + (val.salespos == val.omset ? 'red' : 'green' ) + '"></td></tr>'
});    

$('tbody').html(htmloutp); //add tbody in html

给予td bgcolor取决于条件

2 个答案: