gpt4 book ai didi

javascript:如何动态地将div添加到表格单元格?

转载 作者:行者123 更新时间:2023-12-03 11:02:43 27 4
gpt4 key购买 nike

我有一个通过 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.更新过程中如何访问任意图表容器?

谢谢。

最佳答案

您可以简单地使用 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

关于javascript:如何动态地将div添加到表格单元格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28010022/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com