Table in jQuery with toggable row - javascript

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>

Related

Best Way to make one section of a LI editable

What is the best way to make JUST card.price editable? I've futzed around with several different ways that seemed stupid simple, but it just isn't producing the right results. Does anyone out there have some suggestions?
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + card.price +
"<button class='removeThis'>" +
"X" + "</button>" + "</li>";

Here's a simple way to do that with input elements. Simplified example to illustrate it:
var card = {};
card.card_name = "Card Name";
card.price = "4.00";
var inputBeg = "<input size=8 style='border: none;' value='$";
var inputEnd = "'>";
var html = "";
for (var i = 0; i < 3; i++) {
html += "<li class='list-item ui-state-default' id=" + i + ">" +
card.card_name + ' - ' + inputBeg + card.price + inputEnd + "<button class='removeThis'>" +
"X" + "</button>" + "</li>";
}
document.body.innerHTML = html;
You could get much fancier with the styling if you wanted to.

Jquery on click function only works for the first row of data.

I have a table which is auto-generated with data from the database and created using jquery. This is created using the following tr variable which is appended to the main tbody : Below is my code :
var list = " <tr id='order_no_tr'><td id='order_no_td" + item.documentno + "'>" + item.documentno + "</td><td>" + item.progressstatus + "</td><td>" + newDate + "</td>\n\
<td><button type='button' id='cnfrmd_rcvd" + item.c_order_id + "' class='btn btn-default btn-sm cnfrmd_rcvd" + item.c_order_id + "' >Confirm Received</button>\n\
<input type='hidden' name='order_no_txt' id='order_no_txt" + item.c_order_id + "' value='" + item.c_order_id + "' class='order_no_txt" + item.c_order_id + " btn btn-primary'/>\n\
</td></tr>";
$("#order_no_tbody").append(list);
$("#order_no_tr").on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {
var order_no = this.value;
alert(order_no);
});
Now I have an issue with the on click function, it only works with the first row of the generated table. How can I make the onclcick function to work with all the entries of the onclick function ? Below is the onclcick function which relies on the tr id to get the confirmed order id.
$("#order_no_tr").on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {
var order_no = this.value;
alert(order_no);
});

try this
$(document.Body).on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {
var order_no = this.value;
alert(order_no);
});
now click event work for all .cnfrmd_rcvd. Currnetly you are binding click event with #order_no_t

Your problem is that id can only match one element, so when you do you call $("#order_no_tr") it will only bind the click event to the first matched tr with that id. Switch it to a class instead and bind to that:
$(".order_no_tr").on("click", ".cnfrmd_rcvd", function(ev) { ....

Since you are create rows dynamically, you should use event delegation to handle event:
$('#order_no_tbody').on('click',".cnfrmd_rcvd" + item.c_order_id,function(){
var order_no = this.value;
alert(order_no);
})//if #order_no_tbody is not created by js
your code didn't work because you were trying to attach event handler to element doesn't exist yet. using event delegation allow you to attach event handler to its parent element that already exist.

You cannot use same id for more than one element in a page. If you do, the browser will consider only the first element. Use class instead of ID. Your code should be
var list = " <tr class='order_no_tr'><td id='order_no_td" + item.documentno + "'>" + item.documentno + "</td><td>" + item.progressstatus + "</td><td>" + newDate + "</td>\n\
<td><button type='button' id='cnfrmd_rcvd" + item.c_order_id + "' class='btn btn-default btn-sm cnfrmd_rcvd" + item.c_order_id + "' >Confirm Received</button>\n\
<input type='hidden' name='order_no_txt' id='order_no_txt" + item.c_order_id + "' value='" + item.c_order_id + "' class='order_no_txt" + item.c_order_id + " btn btn-primary'/>\n\
</td></tr>";
$("#order_no_tbody").append(list);
$(".order_no_tr").on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {
var order_no = this.value;
alert(order_no);
});

I find problem that you are searching click event in ID #order_no_tr and this ID is for first row of yours table that the reason it working on first row only.
Other Idea is using Class for every Row
So code could be like
var list = " <tr class='order_no_tr'><td id='order_no_td" + item.documentno + "'>" + item.documentno + "</td><td>" + item.progressstatus + "</td><td>" + newDate + "</td>\n\
<td><button type='button' id='cnfrmd_rcvd" + item.c_order_id + "' class='btn btn-default btn-sm cnfrmd_rcvd" + item.c_order_id + "' >Confirm Received</button>\n\
<input type='hidden' name='order_no_txt' id='order_no_txt" + item.c_order_id + "' value='" + item.c_order_id + "' class='order_no_txt" + item.c_order_id + " btn btn-primary'/>\n\
</td></tr>";
$(".order_no_tbody").append(list);
$(".order_no_tr").on("click", ".cnfrmd_rcvd" + item.c_order_id, function() {
var order_no = this.value;
alert(order_no);
});

How to append a element that have more childs?

i need to append a table but i do it the wrong way.. I have this:
$("#times").append('<table id="departure_' + i + '" width="50%"> <tbody><tr><td>' + data.times[i].destination.name + '</td><td id="appendLate' + i + '">' + time + '</td><td>' + data.times[i].track + '</td><td>' + data.times[i].train_type + '</td><td>' + data.times[i].company + '</td></tr></tbody></table>');
this masive line make no table but alot of tabels.. hard to style.
how can i fix this?
see in action here: http://codepen.io/shiva112/pen/JGXoVJ?editors=001

The problem is that you are appending the whole table in a for statement. You should do something like this
// Select or create a table here
var table = $("#my-target-table");
var tableContent = "";
for (var i = 0; i < data.times.length; ++i) {
tableContent += '<tr><td>' + data.times[i].destination.name + '</td><td id="appendLate' + i + '">' + time + '</td><td>' + data.times[i].track + '</td><td>' + data.times[i].train_type + '</td><td>' + data.times[i].company + '</td></tr>'
}
table.find('tbody').html(tableContent);

How can I initialize class or title in string in jquery

Variables pass, time and place are inputs from HTML, so when I click on button I am appending new row in the table, but every new row appended need to have different class and title, and that should be get from place input i.e. place.val().
$("button").click(function() {
var pass = $("#pass");
var time = $("#time");
var place = $("#place");
$("table").append("<tr><td>" + pass.val() + "</td><td>" + time.val() +
"</td>" + "<td title=place.val() class=place.val()>" + 2 + "</td></tr>");
});

Try this:
$("button").click(function() {
var pass = $("#pass");
var time = $("#time");
var place = $("#place");
$("table").append("<tr><td>" + pass.val() + "</td><td>" + time.val() +
"</td>" + "<td title=" + place.val() + " class=" + place.val() + ">" + 2 + "</td></tr>");
});

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?

Categories