Develop Reference

Jquery/Javascript | HTML Table Sum Total Records of sibling TD in last TD

I am Trying to Update the Last based on the sum of sibling in that row..
The Table TD has class contenteditable = "TRUE" when clicked.
so i am trying when someone try to update the digit on that td column it should also update the last in that row.
Here is the Fiddle of the Table i have now..
JS FIDDLE LINK HERE

You need to add keyup() event for .inner class like,
$('tr.tableRow td.inner').on('keyup',function(){
$tr=$(this).closest('tr');
var sum=0;
$tr.find('td.inner:not(.total)').each(function(){
sum += Number($(this).text());
});
$tr.find('.total').text(sum);
});
Also in my demo I added a class .total to show the total of all inner class. See the Live demo

You can calculate on blur of edited TD
$('tr.tableRow td.inner').on('blur',function(e){
var sumTD = $(this).parent().find("td:last");
sumTD.text(parseInt(sumTD.text())+ parseInt($(this).text()));
});
http://jsfiddle.net/yhjw23of/9/

check your js fiddle link
$('tr.tableRow td.inner').on('click',function(e){
e.preventDefault();
e.stopImmediatePropagation();
$(this).attr('contentEditable','true');
$(this).addClass('inputCopyCat');
$(this).focus();
});
$('tr.tableRow td.inner').focusout(function(e){
$('td.inputCopyCat').removeAttr('contentEditable');
$('td.inputCopyCat').removeClass('inputCopyCat');
var currentTableRow = $(this).parent();
var currentTabelRowSum = 0;
currentTableRow.find('td.inner:not(:last)').each(function() {
var userInput = parseInt(this.innerText);
if(!isNaN(userInput)) {
currentTabelRowSum += parseInt(this.innerText);
}
});
currentTableRow.find('td.inner:last').text(currentTabelRowSum);
});

Adding Table Rows on Button Click

I want to add table rows as the user clicks the Add button. In a new row there are 3 textboxes. As the rows gets added id of textboxes should be set like array list.
For e.g
if it is 2nd row added, the textbox ids will be textbox1_1 textbox2_1 textbox3_1
if it is 3rd row added, the textbox ids will be textbox1_2 textbox2_2 textbox3_2
Because I want to Add all these textboxes values in a single string at the end.
FIDDLE
Added later :-
Indeed at the first time there are no rows in the table.

try this:
$("#btnAdd").click(function(){
var id = $('table tr').size(),
i,
row = '<tr>';
for(i = 1; i <= 3; i++) {
row += '<td><input type="text" id="text'+i+'_'+id+'" />';
}
row += '</tr>';
$('table').append(row);
});
DEMO
Alternativly if you want to build from previous rows you can do this:
$("#btnAdd").click(function(){
var id = $('table tr').size(),
tr = $('table tr').last().clone();
$(tr).find('td').each(function (index) {
$(this).attr('id', 'text'+index+'_'+id);
});
$('table').append(tr);
});
DEMO

Try this : you can add row by cloning first row and updating each input's id by iterating them.
//get the count of available row in table
var count = $('#dynamicTable tr').length;
$("#btnAdd").click(function(){
//clone the first row in table
var $tr = $('#dynamicTable tr:first').clone();
//iterate each input to change its id
$tr.find('input').each(function(){
var id = $(this).attr('id');
id = id.substring(0,id.length-1);
$(this).attr('id',id+count);
});
// update count
count++;
//add row to the table
$('#dynamicTable').append($tr);
});
JSFiddle link

Try thus
$("#btnAdd").click(function(){
var rowCount = $("table tr").length;
var firstRow = $("table tr:first").clone();
firstRow.find("input").each(function(){
this.id=this.id.replace("_0","_"+rowCount);
});
$("table").append(firstRow);
});
DEMO

write less do more with jquery. use chaining as below
$("#btnAdd").click(function(){
$('table')
.find("tr:first") // traverse the first tr
.clone() // clone the row
.appendTo('table') // append the the table tag
.end() // reset to default selector
.find('input').each(function(i,x){
$(this).prop('id',this.id.split('_')[0]+'_'+(+$('table tr').length-1)); // assign the id to the added new row
});
});
EDIT done with FIDDLE too
Hope it helps....

selector with table rows

I have an html table, and i add a class on one row.
The class is applied this way, and i later want to swap the rows.
$('.bTable').on('click', 'tbody tr', function(event) {
if($(this).attr('class')!='highlightgreen'){
$(this).addClass('highlightgreen').siblings().removeClass('highlightgreen');
}else{
$(this).removeClass('highlightgreen');
}
});
I cant seem to be able to select that class row with eq().
Error example: i try to alert() the a and the row appears fine, i alert() the b, and null comes up.
var a = $('.bTable tbody tr').eq(0);
var b = $('.bTable tbody tr .highlightgreen').eq(0);
How can i select properly that .highlightgreen row?

When selecting a TR with a class, you do $('tr.className'), notice there are no spaces.
When selecting an element inside a TR that has a class, you do $('tr .className').
So just remove the space
var b = $('.bTable tbody tr.highlightgreen').eq(0);
And eq(0) will get the first element in the collection
$('.bTable').on('click', 'tbody tr', function(event) {
$(this).toggleClass('highlightgreen')
.siblings().removeClass('highlightgreen');
});

jQuery: Get next table cell vertically

How can I use jQuery to access the cell (td) immediately below a given cell in a traditional grid-layout html table (i.e., one in which all cells span exactly one row and column)?
I know that the following will set nextCell to the cell to the immediate right of the clicked cell because they are immediate siblings, but I am trying to retrieve the cell immediately below the clicked cell:
$('td').click(function () {
var nextCell = $(this).next('td');
});
Preferably I would like to do it without any use of classes or ids.

Try this:
$("td").click(function(){
// cache $(this);
var $this = $(this);
// First, get the index of the td.
var cellIndex = $this.index();
// next, get the cell in the next row that has
// the same index.
$this.closest('tr').next().children().eq(cellIndex).doSomething();
});

$('td').click(function () {
var index = $(this).prevAll().length
var cellBelow = $(this).parent().next('tr').children('td:nth-child(' + (index + 1) + ')')
});
index is the 0-based index of the cell in the current row (prevAll finds all the cells before this one).
Then in the next row, we find the nth-child td at index + 1 (nth-child starts at 1, hence the + 1).

How about:
$('td').click(function () {
var nextCell = $(this).parent().next().find("td:nth-child(whatever)");
});

If you want to do it without using selectors, you can do:
function getNextCellVertically(htmlCell){
//find position of this cell..
var $row = $(htmlCell).parent();
var cellIndex = $.inArray(htmlCell, $row[0].cells);
var table = $row.parent()[0];
var rowIndex = $.inArray($row[0], table.rows);
//get the next cell vertically..
return (rowIndex < table.rows.length-1) ?
table.rows[rowIndex+1].cells[cellIndex] : undefined;
}
$('td').click(function () {
var nextCell = getNextCellVertically(htmlCell);
//...
});
Not that efficiency is important here but it works out much faster to do it like this - in tests over 100,000 iterations it was 2-5 times faster than the selector based approaches.

Are there an equal number of cells in each table row? If so, you could get the "count" of the cell in question, then select the corresponding cell in the next('tr').

clone table row, append random or sequential number to ID

So i have this code
$('input.clone').live('click', function(){
//put jquery this context into a var
var $btn = $(this);
//use .closest() to navigate from the buttno to the closest row and clone it
var $clonedRow = $btn.closest('tr').clone();
//append the cloned row to end of the table
//clean ids if you need to
$clonedRow.find('*').andSelf().filter('[id]').each( function(){
//clear id or change to something else
this.id += '_clone';
});
//finally append new row to end of table
$btn.closest('tbody').append( $clonedRow );
});
Problem is, each row i clone gets named whatever _clone
How would i write this so that each time i run the function, it picks either a random or more idealy sequential number to append to the id isntead of "_clone"

String(Math.floor(Math.random()*1000000))
will give you a random number in string form between 0 and 999999.

Why not use the count of rows in the table
$clonedRow.find('*').andSelf().filter('[id]').each( function(){
//clear id or change to something else
var rowCount = $btn.closest('tr').siblings().length;
this.id += 'row_' + rowCount;
});

$('input.clone').live('click', function(){
var $btn = $(this);
var $clonedRow = $btn.closest('tr').clone();
$clonedRow.find('*').andSelf().filter('[id]').each( function(){
this.id += '_clone' + $(this).siblings().size();
});
//finally append new row to end of table
$btn.closest('tbody').append( $clonedRow );
});