Sufi Iman Sufi Iman - 5 months ago 29
Javascript Question

Cannot Add Row to HTML Table in jsfiddle using add row button

So this is part of a larger project I am attempting to complete in which I enter data values into a table and have a chart process those data values and graph them accordingly. I have code for a table in HTML, with which the user enters in the data, having created a graph based on the data in that table. I can delete the rows of the table just fine, but I cannot add rows to the table using an "Add Row" button. I feel like the problem could lie with the code that allows the row to be added in the first place, although I'm not sure whether it also has to do with the fact that the jsfiddle is private.

<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>




Here is the code for adding and removing the rows:

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 code is based off of the code from this jsfiddle

Edit: Here is my jsfiddle for comparison.

Answer

Here's a working fiddle:

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

The issue was in the javascript settings, compare your fiddle with the original one and you will see that JQueryUI is loaded and Load type is set to No-wrap in body

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

See here:

enter image description here