更新数据，而不是将它添加到我的表在JavaScript和jQuery中？

问题描述：

我正在使用pusher api，我需要更新数据而不是将其添加到我的表中。数据显示在我的索引中的一个html表中，数据进来了，但是每次调用一个新的状态时它会创建一个新行，我只想更新数据而不是添加新行，只添加一个新行如果状态尚未被调用。更新数据，而不是将它添加到我的表在JavaScript和jQuery中？

如何更新而不是添加每个状态的数据？

的index.html

<div class='test'> 
</div> 

<table class="table tg"> 
<tr> 
<th class="tg-ufsm">Location</th> 
<th class="On the line tg-ufsm">Calls on the Line</th> 
<th class="tg-ufsm">Total Calls</th> 
<th class="tg-ufsm">Average Duration</th> 
<th class="tg-ufsm">% Of All Calls Across All States</th> 
</tr> 

</table>

这里是JavaScript

channel.bind('call', function(data) { 
    var location = data.location; 
    var call_id = data.call_id; 
    var status = data.status; 

    if(!tableStates[location]) { 
    tableStates.location = statesEmpty(); 
    $('.table').append('<tr><td>' + location + '<td>' + status + '</td><td class="count"> </tr>'); 
    $('.test').append($('<div class="myTable ' + location + '"> <div class="count"></div> </div>')); 
    } 

tableStates.location.count += 1; 
$('.table').find('.count').text(tableStates.location.count); 


});

什么是“每个州的呼叫”？我不明白你想要算什么。 – jfriend00 2015-04-05 20:11:20

实时数据是来自每个州的呼叫，如果有意义，我想计算来自每个州的呼叫。例如：NY有多少个电话，并更新表格中的数据 – 2015-04-05 20:16:30

答

我认为有一个错误。可能是在tableStates.location = statesEmpty();这个句子中的意思是tableStates[location] = statesEmpty();

与你的问题相关我会保存它以前生成的节点，所以它会很容易地访问它们来修改它。这里是一个可能的方式做到这一点：

channel.bind('call', function(data) { 
    var location = data.location; 
    var call_id = data.call_id; 
    var status = data.status; 

    if(!tableStates[location]) { 
    tableStates[location] = statesEmpty(); 
    tableStates[location].nodes = { 
     location: $('<td>' + location + '</td>'), 
     status: $('<td>' + status + '</td>'), 
     count: $('<td>0</td>') 
    }; 

    $('.table').append(
     $('<tr></tr>') 
     .append(tableStates[location].nodes.location) 
     .append(tableStates[location].nodes.status) 
     .append(tableStates[location].nodes.count) 
    ); 
    $('.test').append($('<div class="myTable ' + location + '"> <div class="count"></div> </div>')); 
    } 

tableStates[location].count += 1; 
tableStates[location].nodes.count.html(
    tableStates[location].count 
); 


});

这里是plunker：

http://plnkr.co/edit/FNCH5isV8h5ULs16PVww?p=preview

还有其他的解决办法，这在我看来，这可能是在分离方面更好关注。只能将数据存储在某个对象中，然后用这些数据重写整个表。事情是这样的：

var tableStates = {}; 
var table = document.querySelector('table.table.tg'); 

function tableTemplate(tableStates) { 
    table.innerHTML = [ 
     '<tr>', 
     ' <th class="tg-ufsm">Location</th>', 
     ' <th class="On the line tg-ufsm">Calls on the Line</th>', 
     ' <th class="tg-ufsm">Total Calls</th>', 
     ' <th class="tg-ufsm">Average Duration</th>', 
     ' <th class="tg-ufsm">% Of All Calls Across All States</th>', 
     '</tr>', 
     Object.keys(tableStates).map(function (tableState) { 
     return [ 
      '<tr>', 
      '<td>', tableState, '</td>', 
      '<td>', tableStates[tableState].status, '</td>', 
      '<td>', tableStates[tableState].count, '</td>', 
      '</tr>' 
     ].join(''); 
     }).join('') 
    ].join(''); 
} 

channel.bind('call', function(data) { 

    if(!tableStates[data.location]) { 
    tableStates[data.location] = { 
     status: data.status, 
     count: 0 
    } 
    } else { 
    tableStates[data.location] = { 
     status: data.status, 
     count: tableStates[data.location].count + 1 
    }; 
    } 

    tableTemplate(tableStates); 

});

你可以看到它在这里工作http://plnkr.co/edit/3xLUXhth8Ka3cVBXR17j?p=preview

该解决方案可以让你的演示文稿中分离到您的数据模式。这有助于代码的主要功能。

此外，如果你需要包括IE < 8（http://caniuse.com/#search=querySelector），你不需要使用jQuery的css选择器。代替这个，你可以使用document.querySelector

更新数据，而不是将它添加到我的表在JavaScript和jQuery中？

相关推荐