jquery - 更改 jQuery Laravel 中的 <tr> 颜色

Question

我必须在 jQuery 中放置 IF 才能改变颜色？如果我注释逻辑 IF，数据会正常显示。

这是代码

$('.tbody-reply').empty();
        if(data != ""){
            data.forEach(element => {
                $('.tbody-reply').append( ""+
                    "<tr>" +
                        "<td>" + element.description + "</td>" +
                        "<td>" + element.created_at + "</td>" +
                    "</tr>");
                // if(element.idResponder == 'TE')
                //   $('#').css("background-color", "yellow");
            });
        }else{
            $('.tbody-reply').append( ""+
                "<tr>" +
                    "<td align='center' colspan='6'>No Data Found</td>" +
                "</tr>");
        }

Answer 1

您可以在 loop 函数中创建新的 td 时将 CSS 应用于行。我还清理了您创建td元素的方式。

if (response.length) {
  response.forEach(element => {
    let row = $('<tr>'); //create row
    if (element.idResponder == 'TE') { //check if TE
      row.append($('<td>').html(element.description));
      row.append($('<td>').html(element.created_at));
      row.css("background-color", "yellow"); //apply css
    } else {
      row.append($('<td>').html(element.description));
      row.append($('<td>').html(element.created_at));
    }
    table.append(row) //append all data
  });
} else {
  let row = $('<tr>');
  table.append(row)
  row.append($('<td align="center" colspan="6">').html('No Data Found'));
}

工作演示:

var response = [{
  "description": "Always Helping",
  "created_at": "03-02-2002",
  'idResponder': 'TE'
}, {
  "description": "Foo",
  "created_at": "03-02-2020",
  'idResponder': 'Foo'
}, {
  "description": "Ikra",
  "created_at": "03-02-2020",
  'idResponder': 'TE'
}]

let table = $('.tbody-reply')

if (response.length) {
  response.forEach(element => {
    let row = $('<tr>');
    if (element.idResponder == 'TE') {
      row.append($('<td>').html(element.description));
      row.append($('<td>').html(element.created_at));
      row.css("background-color", "yellow"); //apply css
    } else {
      row.append($('<td>').html(element.description));
      row.append($('<td>').html(element.created_at));
    }
    table.append(row) //append all data
  });
} else {
  let row = $('<tr>');
  table.append(row)
  row.append($('<td align="center" colspan="6">').html('No Data Found'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Created Date</th>
    </tr>
  </thead>
  <tbody id="tdata" class="tbody-reply">
  </tbody>
</table>