javascript - 如何替换ajax数据中<td>的内容？

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 中的演示.