Как заменить содержание <td>в данных ajax?

Question

Я пытался изменить текст IN на зеленую точку в data[i].online, а текст OUT на красную точку в data[i].offline.

Это то, что у меня сейчас есть.

Это результат, который я хочу.

Я уже пробовал .text(), .html(). Но это не сработало.

$.ajax({
        type: 'ajax',
        url: url,
        dataType: 'json',
        success: function(data){
        //console.log(data);
        var html = '';
        var i;
        for(i=0; i<data.length; i++){
        html += '<tr>' +
        '<td>'+data[i].name+'</td>'+
        '<td>'+data[i].description+'</td>'+
        '<td>'+data[i].comment+'</td>'+
       '</tr>';
        }
       $('#show').html(html);
      },
      error: function(){
            alert('Fail to load data');
       }
    });

Answer 1

Измените HTML-код генерации строки следующим образом:

for(i=0; i<data.length; i++){
    var row = $('<tr></tr>');
    $('<td></td>').appendTo($(row)).html(data[i].name);
    $('<td></td>').appendTo($(row)).html(getDot(data[i].online));
    $('<td></td>').appendTo($(row)).html(getDot(data[i].offline));
    $('<td></td>').appendTo($(row)).html(data[i].comment);
    $('#show').append($(row));
}

Функция для генерации DOT:

 function getDot(data){
    var div = '';
    if(data) {
      div = $('<div class="dot"></div>');
      if(data === 'IN') {
          $(div).addClass('green-dot');
      } else if(data === 'OUT') {
          $(div).addClass('red-dot');
      }
    }
    return div;
}

CSS :

div.dot {
    width : 20px;
    height : 20px;
    border-radius : 50%;
}

div.green-dot{
    background-color : green;
}

div.red-dot{
    background-color : red;
}

Проверьте демонстрацию в этой скрипке .