简体   繁体   中英

changing css based on linking data from response to html table

I have a html table created by a for loop like below:

for (var i = 0; i < 12; i++) {
var row = $('<tr>').appendTo("#zoning tbody");
for (var j = 1; j < 11; j++) {
    $(`<td class=${i * 10 + j}>${i * 10 + j}<\/td>`).appendTo(row);

how can I write a IF statement that says

if (the numbers in response match numbers in table run this code){ do this } } else if (the numbers in the table are not present in response run this) { do this }

if a number that is present in the table isn't present in response do something else if the number is not present do some else.

eg I tried to write something along the lines of below but not sure what to put in the IF statement

function updateTable() {
    $('td.coloured').css({'background-color':'#8F8F8F','border-color':'black','border-width':'thin'}).toggleClass('coloured');
    $.get('php/test2.php', function(response) {
  console.log(response);
    $.each(response, function(index, item) {
console.log(item.beacon)
      $(`td.${item.beacon}`).css({'background-color':item.location,'border-color':'black','border-width':'thin'}).addClass('coloured');
      if (item.delivery_avg <= 4.00) {
        return $('td.coloured').css({'border-color': 'lime','border-width': 'thick'}).toggleClass('coloured');
      } else if (item.delivery_avg >= 4.01 && item.delivery_avg <= 7.00) {
        return $('td.coloured').css({'border-color': 'orange','border-width': 'thick'}).toggleClass('coloured');
      } else if (item.delivery_avg >= 7.01 && item.delivery_avg <= 10.00) {
        return $('td.coloured').css({'border-color': 'pink','border-width': 'thick'}).toggleClass('coloured');
      } else if (item.delivery_avg >= 10.01) {
        return $('td.coloured').css({'border-color': 'red','border-width': 'thick'}).toggleClass('coloured');
      } else {             
        return $('td.coloured').css({'background-color':'#8F8F8F','border-color':'black','border-width':'thin'}).removeClass('coloured');
      } else {
    console.log("key not found");
    $('td').css({'background-color':'#8F8F8F','border-color':'black','border-width':'thin'}).removeClass('coloured');
  }

});
}
 var updateTableInterval = setInterval(updateTable, 5000);
});

example

1,2,3,4,5,6,7,8,9,10 are present in response change cells 1,2,3,4,5,6,7,8,9,10 to yellow

1,2,4,5,6,7,9,10 are present in response change cells to yellow 3,8 are not present change cells to grey.

I think you don't need the IF at all, you can have your table with all the rows in grey by default and then change the cells to yellow from ALL the numbers in the response, so if 1,2,4,5,6,7,9,10 are present in the response, 3 and 8 will not change to yellow and will be grey

Also you should clear the table to gray every time you need to refresh the data.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM