We Keep Coding

Table in jQuery with toggable row

I have a table with the list of orders in my ecommerce site. I would like another line to appear with the order details by clicking on each line.
I don't understand how to write the function.
Here is how i wrote the table row:
$("#tbody").append("<tr id='riga" + i + "'><th scope='row'>" + idordine
+ "</th><td>" + data + "</td><td>" + prezzoTotale
+ "€</td><td> <button id='button_" + i
+ "')>Dettagli</button></tr><tr id='orderdetail_" + i
+ "' style='display:none;'>"
+ "<th scope='row'> ciao </th><td>ciao2</td><td>ciao2</td><td>ciao2</td></tr>"
);
and the function i wrote is:
for (var i = 0; i < ordini.length; i++) {
$("#button_" + i).click(function(i) {
$("#orderdetail_" + i).toggle("slow");
});
}
the variable i in $("#orderdetail_"+i) doesn't work. How can i do it?
Thanks all.

There's no need to link button_i with orderdetail_i, you can use relative navigation, in this case a relatively simple:
$(this).closest("tr").next()
To facilitate the event handler, I've added togglebutton class to each button and used that in a single selector.
Updated code:
// setup some example data
for (var i = 1;i<10; ++i) {
$("tbody").append("<tr id='riga" + i + "'><th scope='row'>" + "idordine"
+ "</th><td>" + "data" + "</td><td>" + "prezzoTotale"
+ "€</td><td> <button class='togglebutton' id='button_" + i
+ "')>Dettagli</button></tr><tr id='orderdetail_" + i
+ "' style='display:none;'>"
+ "<th scope='row'> ciao </th><td>ciao" + i + "</td><td>ciao" + i + "</td><td>ciao" + i + "</td></tr>"
);
}
// handle toggle
$("button.togglebutton").click(function() {
$(this).closest("tr").next().toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
</tbody>
<table>

How to get ajax response on a button click

I am getting table data from ajax response as json.Some json datas am not displaying but I want it on a button click for other purpose.How can I get it?Please help me.
function leaveTable() {
for (var i = 0; i < leaveList.length; i++) {
var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn dltLev fa fa-times" onclick="cancelLeave(this)" data-dismiss="modal" value="Cancelled"></i></td><tr>';
$('#levListTable').append(tab)
}
}
from ajax response I want leaveTypeId and pass it into sendCancelReq() function.
Complete code :https://jsfiddle.net/tytzuckz/18/

It is complicated to know exactly what you want. I hope that helps you:
The first, I would change, is not to produce the JavaScript events in your html code var tab = .... I think, it is more clear and readable, when you add your event after the creation of the new dom elements. For example:
var tab = $('<tr id="' + i + '">' +
'<td>' + (i + 1) + '</td>' +
'<td class="appliedOn">' + leaveList[i].appliedOn + '</td>' +
'<td class="levType" >' + leaveList[i].levType + '</td>' +
'<td class="leaveOn" >' + leaveList[i].leaveOn + '</td>' +
'<td class="duration">' + leaveList[i].duration + '</td>' +
'<td class="status">' + leaveList[i].status + '</td>' +
'<td class="approvedOn">' + leaveList[i].approvedOn + '</td>' +
'<td class="approvedBy">' + leaveList[i].approvedBy + '</td>' +
'<td><i class="btn dltLev fa fa-times" data-dismiss="modal" value="Cancelled"></i></td>' +
'<tr>');
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });
Then, you are able to send your necessary information more clearly, e.g.:
Instead of the last code
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });
you can write
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this, leaveList[i].leaveTypeId); });
and extend your method cancelLeave to:
function cancelLeave(elem, leaveTypeId) {
var id = $(elem).closest('tr').attr('id')
alert(id)
$("#cancelLeave").modal("show");
$('.sendCancelReq').val(id);
sendCancelReq(leaveTypeId);
}

Got solutionPlease check this:https://jsfiddle.net/tytzuckz/19/
function cancelLeave(elem) {
var levTypeId = $(elem).attr('id')
var id = $(elem).closest('tr').attr('id')
$('.currentLevTypeId').val(levTypeId);
$("#cancelLeave").modal("show");
$('.sendCancelReq').val(id);
}
function sendCancelReq() {
var a= $('.currentLevTypeId').val();
alert(a)
}

Editable rows is not working in table with JSON data?

I parsed JSON objects and made a table structure to display the elements. I wanted to make rows of table editable. This is is the code i used to form the table.
(jsonDatag.data).forEach(function(item) {
var _tr = '<tr class="' + item.symbol + '"><td>' + item.symbol + '</td><td class="' + hclass + '">' + item.highPrice + '</td><td class="' + lclass + '">' + item.lowPrice + '</td><td class="' + oclass + '">' + item.openPrice + '</td><td class="' + ltclass + '">' + item.ltp + '</td><td>' + item.previousPrice + '</td><td>' + item.lastCorpAnnouncementDate + '</td></tr>'
_tbody += _tr
});
_thead = _thead + _tbody;
$('.mytable').html(_thead)
}
Now I added these lines to make my rows editable but it is not reflecting in my output.
$('tr.'+item.symbol+'').each(function() {
$(this).html('<input type="text" value="' + $(this).html() + '" />');
});
What is going wrong here and how can i correct it ?

Editable rows is not working in table
This seems to be confusing since it is the td which is editable.
Also this snippet
$('tr.' + item.symbol + '').each(function() {
$(this).html('<input type="text" value="' + $(this).html() + '" />');
});
probably will place an input.
If you are looking to make a editable td then
<td contenteditable="true">
will work

Getting duplicates in my datatable

I'm new to JavaScript.
I only have three entries in my database but when I run the code listed below I get six results. One entry shows up 3x while the other two entries show up 2x. What might I be doing wrong?
var tidyAppts='';
query.find({
success: function(results) {
// Do something with the returned Parse.Object values
for (var i = 0; i < results.length; i++) {
var object = results[i];
//alert(object.id + ' - ' + object.get('ZipCode'));
tidyAppts+='<tr><td>'
+ object.get('Name') + '<td><td>'
+ object.get('Phone') + '<td><td>'
+ object.get('Address') + '<td><td>'
+ object.get('ZipCode') + '<td><td>'
+ object.get('Frequency') + '<td><td>'
+ object.get('TIDY') + '</td><td>'
+ object.get('FirstTIDYDay') + '</td><td>'
+ object.get('TIDYTime') + '</td><td>'
+ object.get('SecondTIDYDay') + '</td><td>'
+ object.get('SecondTIDYApptTime') + '</td><td>'
+ object.get('ThirdTIDYDay') + '</td><td>'
+ object.get('ThirdTIDYApptTime') + '</td></tr>';
(function($) {
$('#tidy-appt-table').append(tidyAppts);
})(jQuery);
}
},
When I used this code, only the first 4 objects for each entry is displayed in the table but I get the correct amount of records which is 3.
(function($) {
$('#tidy-appt-table').append('<tr><td>'
+ object.get('Name')
+ '</td><td>'
+ object.get('Phone')
+ '</td><td>'
+ object.get('Address')
+ '</td></td>'
+ object.get('ZipCode')
+ '</td></td>'
+ object.get('Frequency')
+ '</td></td>'
+ object.get('TIDY')
+ '</td><td>'
+ object.get('FirstTIDYDay')
+ '</td><td>'
+ object.get('TIDYTime')
+ '</td><td>'
+ object.get('SecondTIDYDay')
+ '</td></td>')
+ object.get('SecondTIDYApptTime')
+ '</td></td>'
+ object.get('ThirdTIDYDay')
+ '</td></td>'
+ object.get('ThirdTIDYApptTime')
+ '</td></tr>';
})(jQuery);
}

i figured it out I removed the plus sign from tidyAppts+='' and made it tidyAppts=

Making multiple elements with jquery each() and jquery function

Well, I have a table with multiple text nodes I'm getting through the .text() function and linking to another table with one row that I'm using as a timeline.
I tried to input in a single td of the text values that corresponds to the correct data, but I only managed to grab the last value I in my loop, instead of getting them all. Here is my code:
var tHold, divLine, id, dataTitle, dataDescription;
$(".class1").each(function(){
tHold = $(this);
$(".class2").each(function(){
if ($(this).text() == tHold.attr("value")){
if($('#1').children("div#" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="' + tHold.attr("name") + '" class="b" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#1").append(divLine);
}
if($('#2').children("div#id" + tHold.attr("name")).length == 0){
dataTitle = '<div class="r">' + $(this).text() + '</div><br/>';
dataDescription = '<div class="t">' + $(this).parent().children(".x").text() + ': ' + $(this).parent().children(".y").text() + ' (' + $(this).parent().children(".z").text() + ')' + '</div>';
divLine = $('<div id="des' + tHold.attr("name") + '" class="c" value="' + tHold.attr("value") + '"></div>');
divLine.append(dataTitle);
divLine.append(dataDescription);
$("#2").append(divLine);
}
}
});
});
It's been simplified and cut out of a whole context , but all that matters is there. How can I set dataDescription to be multiple divs with diferent values instead of just the last I loop through?