[英]javascript: How to add div to table cell dynamically?
I have a table which is filling dynamically via SignalR+knockout.js 我有一张通过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>
I'd like to somehow add a new cell and draw chart (flotchart.org) with MemPercent to this cell. 我想以某种方式添加一个新的单元格并将带有MemPercent的图表(flotchart.org)绘制到该单元格中。
How to add this? 如何添加呢?
In a static case the chart can be made this way: 在静态情况下,可以通过以下方式制作图表:
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();
My questions: 1. how to add cell with chart dynamically? 我的问题:1.如何动态添加带有图表的单元格? 2. how to access any chart containers during the update? 2.在更新过程中如何访问任何图表容器?
Thnx. 日Thnx。
You can simply add chart to the table row with jQuery 您可以使用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>');
I think you will need to enter this code inside a loop. 我认为您需要在循环中输入此代码。
To take the data to put in the cell, you can use an Ajax Call 要将数据放入单元格,可以使用Ajax调用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.