[英]javascript: How to add div to table cell dynamically?
我有一張通過SignalR + knockout.js動態填充的表格
<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)繪制到該單元格中。
如何添加呢?
在靜態情況下,可以通過以下方式制作圖表:
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。
您可以使用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調用
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.