Develop Reference

Delete all rows except last row in a table JQUERY

Could it be possible?
I tried:
$("#tbl1 tbody").empty().append(markup)
var tbl = document.getElementById("tbl1")
var lastRow = tbl.rows[tbl.rows.length - 1];
$("#tbl2 tbody").append(lastRow)
Thanks for any help.

It's easy all you have to do is check if it's not the last row then remove. Refer below-mentioned code to remove every row except last.
$("table tr:not(:last)").remove()

how can I figure out that cells are of same row

I have a html table with 3 columns and 7rows. When I click on a cell its bg is changed to red. I want to make sure that only one cell from each row is selected. So if I am clicking on a cell from row1, which has already a cell selected, I want the prev cell to be deselected and the new cell selected. I want to know how can I figure out that cells are of same row.

Given a table cell, its parentNode will be the containing row, and table rows have a cells property that contains a collection of all the cells. So you can loop through that collection.
function selectCell(cell) {
var siblings = cell.parentNode.cells;
for (var i = 0; i < siblings.length; i++) {
if (i != cell.cellIndex) {
siblings[i].style.backgroundColor = normalBGColor;
}
}
cell.style.backgroundColor = highlightBGColor;
}

If you are using jQuery, in your click handler, do this:
function() {
$(this).closest('tr').find('td').css('backgroundColor', '');
$(this).css('backgroundColor', 'red');
}

You can iterate through the rows, and iterate through the cell in an embedded for loop. The solution provided by John Hartsock on this stackoverflow page should allow you to qualify each cell by row and column.
How do I iterate through table rows and cells in javascript?

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....

Jquery Mobile Table Reflow

I'm trying to create my own script for a mobile version of my tables on my website.
Im currently using the script below to get the size of the table, and create new tables for each row, duplicating the headers into each new table.... (see: http://api.jquerymobile.com/table-reflow/ ) to get an idea of what I'm trying to achieve.
My script is as follows, but their is a js fiddle included at the bottom for a better example.
My problem is that I am only able to create 1 inside each table, where it should really be 3 rows, inside of each table. Again check the fiddle below for a proper example. Can anyone see why it is only creating 1 row in the table?
<script>
$(document).ready(function(){
var TableSize = $("table thead tr th").not("table.mobile_table thead tr th").size(); // Get # of columns
var i = 1;
var TableRowCount = $("table tbody tr").size(); // Get # of body rows
$("table thead tr th").each(function(){
$(this).attr("id", i++); // Give headers incrementing ID
});
for ( var CreateTables = 1; CreateTables < TableRowCount; CreateTables++ ){ // Create new table class="mobile_table" for each row
$("table").after("<table class='mobile_table'></table>");
}
$("table.mobile_table").each(function(){// Insert original headers into each row of new table as first column
var h = 1;
while ( ++h < TableSize){ // this is where the error is, it gives me the stuff below but x3 (the number of created tables)......
$("table.mobile_table").after("<tr><td></td><td></td><td></td></tr>");
}
});
console.log(TableSize);
console.log(TableRowCount);
});
</script>
See the fiddle: http://jsfiddle.net/Yf7KV/

Do you mean like this: http://jsfiddle.net/Yf7KV/2/
JS
$(this).append("<tr><td class='mobile_col_1'>Col 1</td><td class='mobile_col_2'>Col 2</td></tr>");
Explanation: Append will alllow you to append elements one after the another. html replaces with what you currently have

changing the values of height attribute of table cells using jquery or javascript

I have two tables say table 1 and table 2.(both having equal number of rows)
For each of the rows in table 1, I wish to set the height of the corresponding cells in table 2 equal to the corresponding cell in table 1. i.e table2-row1-col1 = table1-row1-col1 and similar.
Please help me .

Use .each to loop through the rows in the first table, and use .eq() to select the table-2 row which corresponds to each table-1 row:
$('#table1 tr').each(function(i,el) {
var hgt = $(this).height();
$('#table2 tr').eq(i).height(hgt);
});
http://jsfiddle.net/mblase75/sCdRk/

Assuming both tables have the exact same number of rows, the below should work. If they differ you'll need to check the existence of a matching table1 row before setting the height.
var $table1 = $("#table1");
var $table2 = $("#table2");
$("TR", $table2).each(function(index) {
$(this).css("height", $("TR", $table1).eq(index).css("height"));
});
Fiddle here to prove it works.

First, you must make sure the two tables have the same number of rows or add some index check codes to avoid OutOfIndex error.
Here is some codes, just FYI:
var tbl2Rows = $("#tbl2 > tbody > tr");
$("#tbl1 > tbody > tr").each(function(index){
console.log($(this).height());
$(tbl2Rows.get(index)).height($(this).height());
});