We Keep Coding

Iterating through JSON object to display a public holidays table

I am trying to display a table with a list of public holidays. At the moment I have a table row with the holiday name on the left and date on the right.
The data which appears is from the final array of the JSON object only where I want to display all of the public holidays.
html of table:
<table class="table table-striped" >
<tbody class="summT">
<div class="resptext">
<tr>
<td align="left" id="txtHolidayName">
</td>
<td class="fontGrey" id="txtHolidayDate">
</td>
</tr>
</div>
</div>
</tbody>
</table>
I have the following code within the success block of the AJAX call to the api:
.............
result.data.response.holidays.forEach(datepoint => {
$dateIterate = new Date(datepoint.date.iso);
$('#txtHolidayDate').html($dateIterate.toDateString());
$('#txtHolidayName').html(datepoint.name);
})
Any ideas are gratefully appreciated. Thank you so much.

I think what you are going to need to do is have template HTML within your loop that you populate with each iteration, and then inject each copy of the filled out template into the table HTML:
HTML:
<table class="table table-striped" >
<tbody class="summT">
<div id="holidates" class="resptext">
</div>
</tbody>
</table>
JavaScript loop:
result.data.response.holidays.forEach(datepoint => {
$('#holidates').append('<tr>\n' +
'<td align="left" >' + datepoint.name + '</td>' +
'<td class="fontGrey" >' + new Date(datepoint.date.iso).toDateString() + '</td>\n' +
'</tr>');
});

How to delete a table row by id except specific id

I have atable where I want to delete all its rows except some rows with specific ids.
I did the follwoing:
for(var y=0; y<table.rows.length; y++)
{
console.log("deleting row "+ y);
var initialRow=document.getElementById("initial-row");
if (table.rows[y].id!=initialRow)
{
table.deleteRow(y);
console.log("row deleted");
}
else continue;
}
But this did not work. Any suggestions?
EDIT:
Here is the HTML table:
<table align='center' cellspacing=1 cellpadding=1 id="data-table" border=1>
<tr id="head">
<th>Name</th>
<th>Type</th>
<th>Action</th>
</tr>
<tr id="initial-row">
<td><input type="text" id="text-field"></td>
<td>
<select name="levels-list" id="levels-list">
<option value="A" id="option-1">A</option>
<option value="B" id="option-2">B</option>
<option value="C" id="option-3">C</option>
</select>
</td>
<td><input type="button" class="add" id="add-button" value="Add"></td>
</tr>
</table>
I am adding rows dynamically int the javascript. Then, I need to delete a row, and refresh the whole table as the added rows ids are dynamic. In order to refresh the table, I want to delete all the old rows except the header and the initial row that was in the HTML page originally. Could not do this correctly.

You're comparing an element id (a string) to a DOM element object. You can remove the getElementById call and simply do:
if (table.rows[y].id!="initial-row")

how to trigger change event on current table rows index in jquery

The Tbody of below table was cloned more than 2 or 3 so I will get more than 2 tbody that contain Class selector .mbody and two of rows in a tbody. However I to used Jquery Change event to get the provinces data when a country selection was selected.
<div class="table-responsive">
<table class="table" id="addressList">
<thead>
<tr>
<th>{{ trans('multiple.country') }}</th>
<th>{{ trans('multiple.province') }}</th>
</tr>
</thead>
<tbody class="mbody">
<tr>
<td>
<select class="country" name="country[]">
<option value="">-</option>
#foreach($country as $vals)
<option value="{{$vals['iso_code_3']}}"
data-id="{{$vals['id']}}">
{{$detail['name']}} {{$vals['id']}}
</option>
#endforeach
</select>
</td>
<td>
<select class="provinces" id="provinces" name="provinces[]" style="width: 100%"></select>
</td>
<td></td>
</tr>
<tr>
<td>
<label> Fields Khmer</label>
<textarea class="form-control" name="fields_kh"></textarea>
</td>
<td>
<label>Fields English </label>
<textarea class="form-control" name="fields_en"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
Javascript:
I want to get the provinces data after country was selected on the current rows of this tables
$(document).on('change', 'tbody.mbody tr td', function (e) {
"use strict";
if(typeof country === 'undefined')return;
var provinces = $('.provinces');
var pro = '<option value="">-</option>';
if ($(this).children('select').hasClass('country')) {
var countryId = parseInt($(".country").select2("data").element[0].dataset['id'])
provinces.select2('val', '');
$.each(country, function (inx, vals) {
if (parseInt(vals.id) === countryId) {
$.each(vals.provinces, function (inx, prov) {
pro += '<option value="' + prov.prov_gis + '" data-id="' + prov.id + '"> ' + prov.eng_name + ' </option>';
});
}
});
provinces.empty().append(pro);
}
});
Select2 don't wrap the provinces contain after append from JS
provinces.empty().append(pro);

Change your selectors to select the elements relative to your cloned tbody
var provinces = $(this).closest('tbody').find('.provinces');
var countryId = parseInt($(this).closest('tbody').find(".country").select2("data").element[0].dataset['id'])
When you clone the elements destroy the select2 before you clone them and then reinitialize it after the clone
to add elements use the select2 syntax
$("#select2").select2('data', {});

You need to find provinces of current td on whose select the onchange is triggerd.
var provinces = $(this).closest('tbody.mbody').find('.provinces');
Also the country should be fetched for current tbody.
var countryId = parseInt($(this).closest('tbody.mbody').find(".country").select2("data").element[0].dataset['id']);

How to add row after last row in table

Table contains hidden template row and zero or more visible data rows.
In end of table there is add button which shoud add new empty row to end of table.
I tried
function addVariablesRow() {
var t = document.getElementById("reportVariablesTable");
var rows = t.getElementsByTagName("tr");
var r = rows[rows.length - 1];
var x = rows[1].cloneNode(true);
x.style.display = "";
r.parentNode.insertBefore(x, r);
}
but it adds row before last row to table. How to add row after last row to table ?
ASP.NET MVC4 application, bootstrap 3 modal, jquery, jquery-ui are used.
html:
<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<table class="table table-condensed table-striped" id="reportVariablesTable">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Calculate</th>
</tr>
</thead>
<tbody>
<!-- first row is hidden add template row -->
<tr style='display:none'>
<td>
<input type="text" name="name">
</td>
<td>
<textarea name="valuetostore"></textarea>
</td>
<td>
<select class="totaltype-select" id="totaltype" name="totaltype">
<option value=""></option>
<option value="Sum">Summary</option>
<option value="Lowest">Smallest</option>
<option value="Highest">Biggers</option>
</select>
</td>
</tr>
<!-- other are visible data rows -->
<tr>
<td>
<input type="text" name="name" value="variable1">
</td>
<td>
<textarea name="valuetostore">a-b</textarea>
</td>
<td>
<select class="totaltype-select" id="totaltype" name="totaltype">
<option value=""></option>
<option value="Sum">Summary</option>
<option value="Lowest" selected>Smallest</option>
<option value="Highest">Biggers</option>
</select>
</td>
</tr>
... remaining rows
</tbody>
</table>
<button onclick="addVariablesRow();">+</button>
</div>
</div>
</div>
</div>
Update
I ned to clone template row which is first in body and make new row visible.
I tried:
function addVariablesRow() {
var $t = $("#reportVariablesTable");
var $row = $($t.find("tr")[1]);
var r = $row.clone();
r[0].style.display = "";
r.appendTo($t);
}
Is this best code ? Maybe it is bettet to find template row as first in body?

As you mentioned JQuery is an option, you could use something like this:
function addVariablesRow() {
var $t = $("#reportVariablesTable");
var $row = $t.find("tbody tr").first();
var $newRow = $row.clone();
$newRow.appendTo($t).show();
}

It can be done via jQuery like this,
$('#reportVariablesTable tr:last').after('<tr>...</tr><tr>...</tr>');
You can include anything within the after() method as long as it's valid HTML, including multiple rows as per the example above.

var t = document.getElementById("reportVariablesTable");
var row = document.createElement("tr")
t.appendChild(row)

$('#reportVariablesTable').find('tbody:last')
.append($('#rep‌​ortVariablesTable')
.‌​find('tbody:first').clone())‌​;

Jquery Sum Values based on dropdown list filter

i have a dropdown filter that works and filter the data on my jquery datatable, but i was wondering how can i make that each time someone select a value from my dropdown list and this gets filter i need to sum all values from the filtered datatable??? how can i do this?
My table is created using Jquery datatables
I need to sum all values from my 'td' 'Total' based on the value of the user selects how can i do this in javascript or jquery?
This is my Dropdown list :
<select id="selectorpdv">
<option value="">Todos</option>
<option value="01/02/2016">#item</option> // USER SELECTS THIS VALUE
<option value="02/02/2016">#item</option>
</select>
This is my filter code:
$('#selectorpdv').on('change', function () {
dataTable.columns(2).search(this.value).draw();
});
This is my table code:
<table class='table datatable-column-search-inputs table-hover table-striped table-bordered'>
<thead>
<tr>
<td>Con</td>
<td class='thead_search'>Platillo</td>
<td class='thead_select'>Pdv</td>
<td class='thead_select'>Rid</td>
<td >PV</td>
<td>0</td>
<td >Total</td>
<td class='sum'>Venta</td>
<td class='fechas'>Fecha</td>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="4" style="text-align:left">Total:</th>
<th></th>
</tr>
</tfoot>
</table>

There is an api for the same provided below :
dataTable.column( i ).data().sum();
If above not work in your current version of datatables library please use code below :
function sumColumn() {
var dataArray = dataTable._('td:nth-child(4)', {"filter": "applied"});
var sum = 0;
for (var i=0, len=dataArray.length; i < len; i++) {
sum += +dataArray[i];
}
alert(sum);
}