Question

下面的代码中是否可以有一个“ if”语句来检测数据是1还是0，如果是“ 1”则更改表格单元格背景的颜色？

我的代码

$(document).ready(function() {

    var data;
    $.get("get_timeline.php", function(data) {

        response = $.parseJSON(data);
        $.each(response, function(i, item) {
            var $tr = $('<tr>').append(
                $('<td>').text(item.deviceid),
                $('<td>').text(item.mediatype),
                $('<td>').text(item.campainname),
                $('<td>').text(item.medianame),
                $('<td>').text(item.start_date),
                $('<td>').text(item.end_date),
                $('<td>').text(item.uploadflag)).appendTo('#records_table');
        });

    });
});

非常感谢您的宝贵时间。

Answer 1

作为使用.toggleClass的替代方法，而不是使用if，可以使用条件运算符?:来保持链接，例如：

var $tr = $('<tr>').addClass(data === 1 ? "active" : "").append(

（或直接在单个单元格上（注意自我，仔细阅读问题...））

$('<td>').addClass(item.active === 1 ? "active" : "").text(item.deviceid)

取决于您需要单个单元格还是整行（所有单元格）-您不想将以上内容添加到每个单元格，请使用css代替，例如tr.active>td { background-color: yellow; }

Answer 2

您可以根据条件使用.toggleClass( className, state)向TD添加自定义类。

$('<td>').text(item.deviceid).toggleClass('your-class-which-set-background', item.deviceid === 1)

var response = [{
    deviceid: 1
  },
  {
    deviceid: 2
  }
]
$.each(response, function(i, item) {
  var $tr = $('<tr>').append(
    $('<td>').text(item.deviceid).toggleClass('your-class-which-set-background', item.deviceid === 1)
  ).appendTo('#records_table');
});

.your-class-which-set-background {
  background-color: #CCC
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="records_table">
</table>

jQuery if语句在动态表创建中

2 个答案: