如何替换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;
}

在此fiddle中查看演示。