We Keep Coding

How to get on row click value from different cells?

Actually i'm trying to set value of a td inside a table in a variable but i'm getting the
row.getElementByTagName is not a function
at selectRow (user.aspx?ID=2:47)
The function is called on tr onclick and has as attribute this
While now i just would show the value of 2nd and 3rd td in an alert.
Here is the script
function selectRow(row) {
var firstInput = row.getElementsByTagName('input')[0];
var user = row.getElementByTagName('td')[1];
var soft = row.getElementByTagName('td')[2];
firstInput.checked = !firstInput.checked;
if (firstInput.checked) {
alert("AGGIUNGI " + user + " " + soft);
//document.getElementById('frame').src = "user.aspx?ADDUSER=" + user + "&SOFT=" + soft;
} else {
//document.getElementById('frame').src = "user.aspx?DELUSER=" + user + "&SOFT=" + soft;
alert("ELIMINA " + user + " " + soft);
}
}

You can do this in jQuery
var tds = $(row).find("td");
var user = tds.get(1);
var soft = tds.get(2);

Javascript - Getting removed item name from table?

So I have an table. By click of a button, information will be added there, so each item has also X button, which removes them from the list. I've been trying to do that, if you click that X button, then it will output to console the item name which you deleted. How could I do that?
Here's the function
function sitaSeen(img, name, condition, price) {
$('tbody').append("<tr id='itemCart'><td><img src=" + img + "></td><td>" + name + "</td><td>" + condition + "</td><td>$" + price + "</td><td><span>X</span></td></tr>");
Which is called, when item has to be added.
Here's the X button code
$(document).ready(function() {
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').ignore('span').text();
console.log(removedname);
$(this).closest('tr').remove();
});
});
There's also kind of my try, but ofc it wont work.

There is no ignore() method in jQuery so it will throws error in console. So either clone the tr and remove span from cloned object and then get text or get all td which is not contains span and get text.
$(document).ready(function() {
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').clone().remove('span').text();
// or
// var removedname = $(this).closest('tr').find('td:not(:has(span))').text();
console.log(removedname);
$(this).closest('tr').remove();
});
});
UPDATE : Since you just want the second column you can simply use :nth-child or :eq() selector(or eq()).
$(document).ready(function() {
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').find('td:nth-child(2)').text();
// or
// $(this).closest('tr').find('td:eq(1)').text();
// or
// $(this).closest('tr').children().eq(1).text();
console.log(removedname);
$(this).closest('tr').remove();
});
});

I think it might be better to use:
```
// better way to get to the tr element
var trElem = $(this).parentNode.parentNode;
```
The parentNode attribute is a better way to access the parent of an element.

The item name is the second td so you can use:
var removedname = $(this).closest('tr').find('td:eq(1)').text();
Because the ID have to be unique I added a new parameter to your function.
function sitaSeen(seq, img, name, condition, price) {
$('tbody').append("<tr id='itemCart" + seq + "'>" +
"<td><img src=" + img + "></td>" +
"<td>" + name + seq + "</td>" +
"<td>" + condition + "</td>" +
"<td>$" + price + "</td>" +
"<td><span>X</span></td>" +
"</tr>");
}
$(function () {
$('#addRow').on('click', function(e) {
var seq = +$(this).attr('data-seq');
$(this).attr('data-seq', seq + 1);
sitaSeen(seq, 'img', 'name', 'condition', 'price');
});
$('.sweet-container').on('click', 'tr span', function(){
var removedname = $(this).closest('tr').find('td:eq(1)').text();
console.log(removedname);
$(this).closest('tr').remove();
});
});
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="sweet-container">
<button id="addRow" data-seq="1">Add Row</button>
<table>
<tbody>
</tbody>
</table>
</div>

How to get next row of HTML table based on some condition using jQuery?

Ok, I am new to JQuery and I have requirement to do some manipulation on table based on rows.
The table consists of rows which belong to 3 different style classes Brand have category and category have products.
var table = $("table tbody");
table.find(".brand").each(function(i) {
var $tdsBrand = $(this).find("td"),
brand = $tdsBrand.eq(0).text(),
atyBrand = $tdsBrand.eq(1).text(),
alyBrand = $tdsBrand.eq(2).text();
console.log('Brand Row ' + (i + 1) + ':\nBrand Name: ' + brand + '\nActual TY: ' + atyBrand + '\nActual LY: ' + alyBrand);
var brandClass = $(this).attr("class");
console.log('brand class : ' + brandClass);
if (this row has next row as category) {
//if(brand.next($( "tr[class='category']" ))) {
//if ("(.band):has(.category)") {
//if ($(this).parents(".category").length == 1) {
table.find(".category").each(function(i) {
var catClass = $(this).attr("class");
console.log('category class : ' + catClass);
var $tdsCategory = $(this).find("td"),
category = $tdsCategory.eq(0).text(),
atyCategory = $tdsCategory.eq(1).text(),
alyCategory = $tdsCategory.eq(2).text();
console.log('Category Row ' + (i + 1) + ':\nCategory Name: ' + category + '\nActual TY: ' + atyCategory + '\nActual LY: ' + alyCategory);
if (This row has next row as product) {
//if(next($( "tr[class='product']" ))) {
//if ("(.category):has(.product)") {
//if ($(this).parents("product").length == 1) {
table.find(".product").each(function(i) {
var proClass = $(this).attr("class");
console.log('product class : ' + proClass);
var $tds = $(this).find("td"),
product = $tds.eq(0).text(),
aty = $tds.eq(1).text(),
aly = $tds.eq(2).text();
console.log('Product Row ' + (i + 1) + ':\nProduct Name: ' + product + '\nActual TY: ' + aty + '\nActual LY: ' + aly);
});
}
});
}
});
What I want to do is, I have to sum up Actual TY values of products and display them on their category. Then sum up Actual TY of categories (which has been calculated from products for different categories) to their brand.
Please refer http://jsfiddle.net/cfhhz0zr/46/ for clear understanding of my requirement and code which I've tried till now.
Thank you.

Just modified a bit your code and it seems that is doing what you are looking for. See also the http://jsfiddle.net/88prg1dt/
I refactored a bit and renamed some variables to make a bit more sense so should be fairly clear now. If you want to calculate the total for a product / category now should be really super simple.
Here is the JS code:
var $table = $("table tbody");
$table.find(".brand").each(function (brandIndex) {
var $brandRow = $(this);
var $tdsBrand = $(this).find("td");
var brandName = $tdsBrand.eq(0).text();
var atyBrand = $tdsBrand.eq(1).text();
var alyBrand = $tdsBrand.eq(2).text();
console.log('Brand Row ' + (brandIndex + 1) + ':\nBrand Name: ' + brandName + '\nActual TY: ' + atyBrand + '\nActual LY: ' + alyBrand);
var $categoryRows = $brandRow.nextUntil('.brand').filter('.category');
$categoryRows.each(function (categoryIndex) {
var $categoryRow = $(this);
var $tdsCategory = $categoryRow.find("td");
var categoryName = $tdsCategory.eq(0).text();
var atyCategory = $tdsCategory.eq(1).text();
var alyCategory = $tdsCategory.eq(2).text();
console.log('Category Row: ' + (categoryIndex + 1) + ':\nCategory Name: ' + categoryName + '\nActual TY: ' + atyCategory + '\nActual LY: ' + alyCategory);
var $productRows = $categoryRow.nextUntil('.brand, .category').filter('.product');
$productRows.each(function (productIndex) {
var $productRow = $(this);
var $tdProducts = $productRow.find("td");
var productName = $tdProducts.eq(0).text();
var atyProduct = $tdProducts.eq(1).text();
var aly = $tdProducts.eq(2).text();
console.log('Product Row ' + (productIndex + 1) + ':\nProduct Name: ' + productName + '\nActual TY: ' + atyProduct + '\nActual LY: ' + aly);
});
});
});
I played a bit with jQuery nextUntil() method as the documentation:
Description: Get all following siblings of each element up to but not
including the element matched by the selector, DOM node, or jQuery
object passed.
Is this answering your question ?

how can I modify my jQuery function to update the number counter

I am showing number counter in one of my section. When I add new betslips to the container the numbers are displaying correctly. However, when I delete any of the row the counter is not getting updated. For example if there are 3 rows numbered 1, 2 and 3 and if I delete row number 2 the updated values are 1 and 3. Infact the counter should reset to 1 and 2.
Here is my JS code
Adding the betslip rows
function createSingleBetDiv(betInfo) {
var id = betInfo['betType'] + '_' + betInfo['productId'] + '_' + betInfo['mpid'],
div = createDiv(id + '_div', 'singleBet', 'bet gray2'),
a = createA(null, null, null, null, 'right orange'),
leftDiv = createDiv(null, null, 'left'),
closeDiv = createDiv(null, null, 'icon_shut_bet'),
singleBetNumber = ++document.getElementsByName('singleBet').length;
// Info abt the bet
$(leftDiv).append('<p class="title"><b>' + singleBetNumber + '. ' + betInfo['horseName'] + '</b></p>');
var raceInfo = "";
$("#raceInfo").contents().filter(function () {
if (this.nodeType === 3) raceInfo = $(this).text() + ', ' + betInfo['betTypeName'] + ' (' + betInfo['value'] + ')';
});
$(leftDiv).append('<p class="title">' + raceInfo + '</p>');
// Closing btn
(function(id) {
a.onclick=function() {
removeSingleBet(id + '_div');
};
})(id);
$(a).append(closeDiv);
// Creating input field
$(leftDiv).append('<p class="supermid"><input id="' + id + '_input\" type="text"></p>');
// Creating WIN / PLACE checkbox selection
$(leftDiv).append('<p><input id="' + id + '_checkbox\" type="checkbox"><b>' + winPlace + '</b></p>');
// Append left part
$(div).append(leftDiv);
// Append right part
$(div).append(a);
// Appending div with data
$.data(div, 'mapForBet', betInfo);
return div;
}
Function to remove betslip
function removeSingleBet(id) {
// Remove the div
removeElement(id);
// Decrease the betslip counter
decreaseBetSlipCount();
// Decrease bet singles counter
updateBetSinglesCounter();
}
function decreaseBetSlipCount() {
var length = $("#racingBetSlipCount").text().length,
count = $("#racingBetSlipCount").text().substring(1, length-1),
text;
count = parseInt(count);
if (!isNaN(count)) count--;
if (count == 0) text = noSelections;
else text = count;
$("#racingBetSlipCount").text('(' + text + ')');
}

This could be done using only CSS, e.g:
DEMO jsFiddle
HTML:
<div id="bets">
<div class="bet"> some content</div>
<div class="bet"> some content</div>
<div class="bet"> some content</div>
</div>
CSS:
#bets {
counter-reset: rowNumber;
}
#bets .bet {
counter-increment: rowNumber;
}
#bets .bet::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
All row number will be updated automatically when adding/removing any row.

You can manage to do that with following steps;
Enclose bet no with span,
$(leftDiv).append('<p class="title"><b><span class="bet_no">' + singleBetNumber + '<span>. ' + betInfo['horseName'] + '</b></p>');
and I assume you have aouter div called "your_div"
Call below function after every increase and decrease event
function updateBetNo() {
var counter = 1;
$("#your_div .bet_no").each(function(i, val) {
$(this).text(counter);
counter++;
});
}

Make the betNumber findable:
$(leftDiv).append('<p class="title"><b><span class="singleBetNumber">' + singleBetNumber + '</span>. ' + betInfo['horseName'] + '</b></p>');
After an insert or delete renumber:
$('.singleBedNumber').each(function(idx, el) {
$(el).html('' + (idx + 1));
});

The first problem I see is that $("#racingBetSlipCount") is likely not selecting what you think it is. Since #racingBetSlipCount is an id selector it will only select one item.
To me you need to wrap the betnumber in something accessible so you can update it without having to parse through the title.
So first you would update the creation of the betTitle:
$(leftDiv).append('<p class="title"><b><span class=\'betNum\'>' + singleBetNumber + '</span>. ' + betInfo['horseName'] + '</b></p>');
Then you can loop through each and update the number appropriately.
var count = 1;
$.each($(".betNum"), function(){
$(this).html(count++);
});

Binding events with jQuery to multiple elements with a for loop

So I'm working on this think where I need to generate elements and then bind events to them. Every time I generate an element I unbind and rebind the events to the generated elements with a for loop. These functions seem to trigger, but they get the wrong index (which tells the code which element to work with).
Check out the code at jsFiddle http://jsfiddle.net/6UgYe/4/
Anything modular that solves this will do. Also feel free to comment on my code. I wrote most of this last year when I had just begun with javascript.
Regards,
Akke
EDIT: Here is the solution in action: http://jsfiddle.net/nwH8Z/3/ it calculates VAT-Free prices on blur.

Change your bindEmAll function to look like this -
function bindEmAll()
{
$('#container').on('blur', 'input[id$=".5"]', function(){
$('#Errorfield').append('Current box is ' + this.id + '<br/>').append(num_format(this.value) + '<br />')
})
}
It makes all input boxes with IDs that end in '.5' append their ids and values, handled by your num_format() function, to #Errorfield. The event handler is attached to all input boxes inside #container, even if they are added dynamically.
And remove bindEmAll() from your click handler for #addTT; otherwise the event handlers will be bound as many times as you've clicked addTT, which makes things quite messy ;-)
$('#addTT').click(function() {
addTT('#container');
});
Updated fiddle here.

The problem is happening because the blur event handler is not being run until well after the loop finished. The order of execution is:
Attach event handler to blur event on item 1
Attach event handler to blur event on item 2
...some time later...
Actually invoke the blur event
By the time your event handler is invoked the value of the variable i from the loop has changed to the index of the last value, so that is what is being used in the event handler.
To get around this you can just put your code inside a closure:
(function(i) {
$('#container input#box' + i + '\\.5').unbind();
$('#container input#box' + i + '\\.5').blur(function() {
//error processing function;
$('#Errorfield').append('Current box is $(\'#container input#box' + i + '\\.5\')<br />');
});
$('#container input#box' + i + '\\.5').blur(function() {
$('#container input#box' + i + '\\.5').val(num_format($('#container input#box' + i + '\\.5').val()));
$('#Errorfield').append('Current box is $(\'#container input#box' + i + '\\.5\')<br />');
});
})(i);
I've updated your fiddle here

boxes = 1;
function num_format(input) {
//For demo purporses, we only parseInt()+5
ret = parseFloat(input) + 5;
return ret;
}
function addTT(parentElement, arg1, arg2, arg3, arg4, arg5) {
if (!arg1) {
arg1 = "";
}
if (!arg2) {
arg2 = "";
}
if (!arg3) {
arg3 = "";
}
if (!arg4) {
arg4 = "";
}
if (!arg5) {
arg5 = num_format((0.00).toFixed(2));
}
row = $('<tr></tr>').attr('id', boxes);
cell1 = $('<td class="inputcell"></td>');
cell2 = $('<td class="inputcell"></td>');
cell3 = $('<td class="inputcell"></td>');
cell4 = $('<td class="inputcell"></td>');
cell5 = $('<td class="inputcell"></td>');
input1 = $('<input></input>').attr('style', 'width:100px;').attr('id', 'box' + boxes + '.1').attr('name', 'box' + boxes + '_1').attr('type', 'text').attr('value', arg1);
input2 = $('<input></input>').attr('style', 'width:100px;').attr('id', 'box' + boxes + '.2').attr('name', 'box' + boxes + '_2').attr('type', 'text').attr('value', arg2);
input3 = $('<input></input>').attr('style', 'width:93px;').attr('id', 'box' + boxes + '.3').attr('name', 'box' + boxes + '_3').attr('type', 'text').attr('value', arg3);
input4 = $('<input></input>').attr('style', 'width:149px;').attr('id', 'box' + boxes + '.4').attr('name', 'box' + boxes + '_4').attr('type', 'text').attr('value', arg4);
input5 = $('<input></input>').attr('style', 'width:90px;').attr('id', 'box' + boxes + '.5').attr('name', 'box' + boxes + '_5').attr('type', 'text').attr('value', arg5);
$(cell1).append(input1);
$(cell2).append(input2);
$(cell3).append(input3);
$(cell4).append(input4);
$(cell5).append(input5);
$(row).append(cell1);
$(row).append(cell2);
$(row).append(cell3);
$(row).append(cell4);
$(row).append(cell5);
$('#tBoxes').append(row);
boxes++;
}
function subTT(parentElement) {
boxes = boxes - 1;
$(parentElement + ' #' + boxes).hide(0, function () {
$(parentElement + ' #' + boxes).remove();
}
);
}
function bindEmAll() {
alert(boxes);
for (var i = 1; i <= boxes - 1; i++) {
$('#container input#box' + i + '\\.5').blur(function () {
alert($(this).val());
$(this).val(num_format($(this).val()));
//$('#container input#box' + i + '\\.5').val(num_format($('#container input#box' + i + '\\.5').val()));
//$('#Errorfield').append('Current box is $(\'#container input#box' + i + '\\.5\')<br />');
});
}
}
$('#addTT').click(function () {
addTT('#container');
bindEmAll();
});
$('#subTT').click(function () {
subTT('#container');
});
$(function () { addTT('#container'); bindEmAll(); });

Here is a small example of adding new elements and process their events:
<button id="add">+</button>
<button id="remove">-</button>
<div id="holder">
</div>
.
$('#add').on('click', function () {
$('#holder').append('<p>click me!</p>');
});
$('#remove').on('click', function () {
$('#holder p:last-of-type').remove();
});
$('#holder').on('click', 'p', function () {
alert('my id is: ' + $('#holder p').index(this));
});
And you can check it out here: http://jsfiddle.net/simo/PyKDz/