javascript: 如何动态添加div到table单元格？

Question

我有一个 table 正在通过 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. 如何在更新期间访问任何图表容器？

谢谢。

Answer 1

您只需使用 jQuery

将图表添加到 table 行

$('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到table单元格？

javascript: How to add div to table cell dynamically?

javascript

charts

knockout.js