Question

因此，这是我正在尝试完成的一个更大项目的一部分，我在该项目中将数据值输入到表中，并使图表处理这些数据值并相应地绘制它们。我有一个HTML表格的代码，用户使用该表格输入数据，并根据该表格中的数据创建了一个图表。我可以删除表中的行，但是我不能使用＆＃34;添加行＆＃34;来添加行。按钮。我觉得问题可能在于允许首先添加行的代码，尽管我不确定它是否也与jsfiddle是私有的事实有关。

<div id="chartdiv" style="width: 100%; height: 450px;"></div>
<div id="data-table">
<div class="data-row">
    <input class="data-cell data-category" value="06/16/2016" type="date" />
    <input class="data-cell data-value" value="4000" type="number" step="10" />
    <input class="data-button delete-button" type="button" value="X" />
</div>
<div class="data-row">
    <input class="data-cell data-category" value="07/16/2016" type="date" />
    <input class="data-cell data-value" value="1882" type="number" step="10" />
    <input class="data-button delete-button" type="button" value="X" />
</div>
<div class="data-row">
    <input class="data-cell data-category" value="08/16/2016" type="date" />
    <input class="data-cell data-value" value="1809" type="number" step="10" />
    <input class="data-button delete-button" type="button" value="X" />
</div>
<div class="data-row">
    <input class="data-cell data-category" value="09/26/2016" type="date" />
    <input class="data-cell data-value" value="1322" type="number" step="10" />
    <input class="data-button delete-button" type="button" value="X" />
</div>
<div class="data-row">
    <input class="data-cell data-category" value="10/26/2016" type="date" />
    <input class="data-cell data-value" value="1122" type="number" step="10" />
    <input class="data-button delete-button" type="button" value="X" />
</div>

以下是添加和删除行的代码：

function generateChartData() {
var chartData = [];
jQuery('.data-row').each(function () {
    var date = jQuery(this).find('.data-category').val();
    var value = jQuery(this).find('.data-value').val();
    if (date != '') {
        chartData.push({
            date: date,
            value: value,

        });
    }
});
return chartData;
}

function initRowEvents(scope) {
scope.find('.data-cell')
    .attr('title', 'Click to edit')
    .on('keypress keyup change', function () {
        // re-generate chart data and reload it in chart
        chart.dataProvider = generateChartData();
        chart.validateData();
    }).end().find('.delete-button').click(function () {
        // remove the row
        $(this).parents('.data-row').remove();

        // re-generate chart data and reload it in chart
        chart.dataProvider = generateChartData();
        chart.validateData();
    });
}

jQuery(function () {
initRowEvents(jQuery(document));
});

此代码基于this jsfiddle

的代码

修改：Here is my jsfiddle for comparison.

Answer 1

这是一个工作小提琴：

https://jsfiddle.net/xtrinch/3enr8q6m/

问题出在javascript设置中，将你的小提琴与原来的小提琴进行比较，你会看到加载了JQueryUI并且Load type被设置为No-wrap in body

Won't let me post the fiddle link without some code..

见这里：

无法使用添加行按钮在jsfiddle中将行添加到HTML表

1 个答案: