javascript : 동적으로 테이블 셀에 div를 추가하는 방법은 무엇입니까?

Question

은 내가 SignalR +를 통해 동적으로 작성되는 테이블

<table id="infoTable" border="0" class="table table-striped"> 
    <thead style="cursor:pointer"> 
     <tr data-bind="foreach: headers"> 
      <td data-bind="click: $parent.toggleSort, text: title"></td> 
     </tr> 
    </thead> 
    <tbody> 
     <!-- ko foreach: machines --> 
     <tr> 
      <td data-bind="text: machineName"></td> 
      <td data-bind="text: cpu"></td> 
      <td data-bind="text: memUsage"></td> 
      <td data-bind="text: memTotal"></td> 
      <td data-bind="text: memPercent"></td> 
      <td> 
       <div class="demo-container"> 
        <div id="placeholder1" class="demo-placeholder"></div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

어떻게 든이 셀에 MemPercent과 새로운 셀을 추가하고 차트 (flotchart.org)를 그리는 싶습니다 knockout.js 있습니다.

추가하는 방법?

var container1 = $("#placeholder1"); 
     var plot1 = $.plot(container1, dataSeries, { 
      series: { 
       shadowSize: 0 
      }, 
      yaxis: { 
       min: 0, 
       max: 100 
      }, 
      xaxis: { 
       show: false 
      } 
    }); 

function update() { 
      plot1.setData(series); 
      plot1.draw(); 
      setTimeout(update, updateInterval); 
     } 

     update(); 

내 질문 : 1. 어떻게 동적 차트 셀을 추가하는 차트가 이런 식으로 할 수 정적 경우

? 2. 업데이트 도중 차트 컨테이너에 액세스하는 방법은 무엇입니까?

Thnx.

Answer 1

당신은 단순히 당신이 루프 내부에이 코드를 입력해야합니다 생각 jQuery를

$('tbody').append('<tr><td data-bind="text: machineName"></td><td data-bind="text: cpu"></td><td data-bind="text: memUsage"></td><td data-bind="text: memTotal"></td><td data-bind="text: memPercent"></td><td><div class="demo-container"><div id="placeholder1" class="demo-placeholder"></div></div></td></tr>'); 

로 테이블 행에 차트를 추가 할 수 있습니다.

셀에 넣어 데이터를 이용하려면, 당신은 Ajax Call