如何替换内容<td>在ajax数据中？

Question

I tried to change the text IN to green dot in data[i].online and the text OUT to red dot in data[i].offline .

This is what I have right now.

This is the result that I want.

I have already tried .text() , .html() . But these were not work for it.

$.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

Change you html row generation code as follows:

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));
}

Function to generate the 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;
}

Check the demo in this fiddle .