更新数据而不是将其添加到 javascript 和 jquery 中的我的 table？

Question

我正在使用推送器 api，我需要更新数据而不是将其添加到我的 table。数据显示在我的索引中的 html table 中，数据正在进入，但每次调用新状态时都会生成新行，我只想更新数据而不是添加新行，只有在状态没有被调用时才添加新行。

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

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


});

Answer 1

我认为有误。可能是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

还有其他解决方案，我认为在关注点分离方面可能更好。可以只将数据存储在某个对象中，然后用这些数据重写整个 table。像这样：

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)，则无需为 css 选择器使用 jQuery。你可以使用 document.querySelector

而不是这个

更新数据而不是将其添加到 javascript 和 jquery 中的我的 table？

Update the data instead of adding it to my table in javascript and jquery?

javascript

html

arrays

pusher