Getting the last row of a table using jQuery? - javascript

I'm dynamically creating table rows. So each time I add a row, I need to get the ID of the last <tr> so that I can create a new <tr> with ID = "(the last row's ID) + 1". Is there any way to get the last row's ID using jQuery?

$('#yourtableid tr:last').attr('id');

Old question, but here's a different way using JQuery traversal which is a bit quicker:
$("#TableId").find("tr").last();
An alternative method to ID your rows, if they are all sequential is just to get the number of rows + 1.
$("#TableId").find("tr").length + 1

var id = $('table tr:last').attr('id');

2019
As of jQuery 3.4.0 :last is deprecated, use .last() instead, like this:
var id = $('#mytable tr').last().attr('id');

var tid=$('#tableid tr:last').attr('id');
alert(tid);

There are two methods and they both work $('#tableid tr:last') and $('#tableid tr').last()

You don't need to use jQuery for that. You can handle it in CSS counters. The counters automatically increments the index values and it also handles the rearrangement of numbers in case a row is deleted from the midst. The CSS counters can be implemented as follows. Insert it into your CSS file that take care of the styles of the HTML table.
#yourtableid tbody
{
counter-reset: tablerow;
}
#yourtableid tbody .yourHTMLcellclass::before
{
counter-increment: tablerow;
content: counter(tablerow)". ";
}

Last row id of table
var lastid = $('table tr:last').attr('id');
var str = lastid .replace(/[^0-9]+/ig,"");

I was looking for a Vanilla javascript solution and this question is the first Google result, so here is the solution without Jquery :
let table = document.getElementById('myTable') ;
let lastLine = table.rows[table.rows.length-1];

Related

Get the exact child Table using Jquery

I have a situation here...
I have two div's content1 and content2,each div has a table also...
so i get each table like this
$("#content1 table")
or
$("#content2 table")
but I want Like this
var x="#content1" or "#content2"
then something like this
$(x "table")
i.e pass the id to a variable and get the table... any solution?
var x= document.getElementById('content1');
$(x).find("table");
try this one
The answer lies in the example you gave itself. Just have to modify it slightly
var x="#content1"; //whatever the name of the parent is
$resulting_table = $(x+" table")
Hope that helps.
You can combine selector using comma by Multiple Selector (“selector1, selector2, selectorN”)
$("#content1 table, #content2 table")
Alternatively you can assign common class to table with #content1 and #content2
$('.common-table-class')
Try to use the context i.e] $('selector',context),
var x= "#content1";
var table = $('table', x);
And the above code is very much similar to,
var x= "#content1";
var table = $(x).find("table");
use find function $(x).find("table")
Use find to get the table
$(x).find("table");
For more simplicity:
$(x + " table");

jQuery - Get table row count with a certain class

I know I can get the number of rows in an HTML table with the following jQuery:
var rows= $('#myTable tbody tr').length;
However, how can I get the number of rows that have a given class (e.g., <tr class="MyClass>). How can I count the number of rows in a table with a class of "MyClass"?
Simply add the class to the selector
var rows= $('#myTable tbody tr.MyClass').length;
No need to overqualify so this would work too
var rows= $('#myTable tbody .MyClass').length;
As Adam said use .class-name selector.
For further examples see other jquery selectors
Just change your jQuery to check for instances of the class.
var rows = $('.MyClass').length;
Here's a jsfiddle example: http://jsfiddle.net/Ma7pz/

How do I combine javascript variable to jquery selector?

I am trying to get the table td texts by using Jquery and javascript
I have the following
//tables contain bunch of tables
for(var i = 0; i < tables.length ; i ++){
var table = tables[i];
$(table 'td').each(function(){ //I know there is something wrong with my selector.
$(this).text()
})
The jquery selector doesn't work in my case. How do I select every td for different table?
Thanks for the help!
I think you want to use the .find() method:
$(table).find('td').each(function(){
DEMO: http://jsfiddle.net/jfj47/
Of course, an alternative is to use the "context selector":
$("td", table).each(function(){
DEMO: http://jsfiddle.net/jfj47/1/
Also, if tables is just an array (or array-like object) of DOM elements, you don't have to loop and could use:
$(tables).find("td").each(function(){
DEMO: http://jsfiddle.net/jfj47/2/
References:
find(): http://api.jquery.com/find/
context selector: http://api.jquery.com/jQuery/

How to check if a table has a row with a specific id jquery

How do I check if a table contains a row with a specific id using jQuery?
Just
if($('#rowID').length){
}
should be sufficient..
ID's on a page are unique.. So this check should do..
if ($('table#uniqueID').find('#rowID').length > 0) {
Once you have the table, it's easier and faster without jQuery.
var table = $('table')[0];
if (table.rows["theId"])
alert("Has the row!");
DEMO: http://jsfiddle.net/wUKyk/
if ($("#elementID").length) { ... }
ID's are unique, so just checking if the ID exists with length is enough
var hasRowX = $table.find('#rowX').length;
To extend on the answer given by 'I Hate Lazy', this also works if the row in question has a 'name' attribute instead of an 'id'. I.e.:
var table = $('table')[0];
if (table.rows["theName"])
alert("Has the row!");

I have a working Javascript code to add new html rows. How to delete one?

this following code works in adding new rows in HTMl:
function addRow()
{
var row = document.getElementById('row');
var newRow = row.cloneNode(true);
row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}
How can I add a new function to remove a row? I tried searching but couldn't find the answer.
To remove a DOM element in Javascript you use the removeChild API. This requires you to have the DOM element of both the container and the item you want to remove.
In this example if you wanted to remove the row with id row you would do the following
var row = document.getElementById('row');
row.parentNode.removeChild(row);
Documentation: https://developer.mozilla.org/En/DOM/Node.removeChild
Note: In this particular example it looks like you are adding multiple DOM nodes with the same id value. Having duplicate id values is not allowed and will cause you many problems down the road. Every id value needs to be unique.
One way to accomplish this would be to use a counter to append a unique suffix to every row you add.
var rowCounter = 0;
function addRow()
{
rowCounter++;
var row = document.getElementById('row');
var newRow = row.cloneNode(true);
newRow.id = 'new_row_' + rowCounter;
row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}
You are looking for the removeChild() function.
I think there is a problem with your addRow() function. You are cloning a node and then keeping the same ID of 'row'.
function addRow()
{
var row = document.getElementById('row');
var newRow = row.cloneNode(true);
// set newRow.id to something other than 'row'
row.parentNode.insertBefore(newRow, document.getElementById('submit_row'));
}
To remove a node, you can use removeChild(), to remove a child node from an element
For example, x.removeChild(y) would remove child y of node x.
If you already have the targeted row, you'd do this...
row.parentNode.deleteRow(row.rowIndex);
https://developer.mozilla.org/en/DOM/table.deleteRow
The docs are for table, but tbody elements have the same method.
If you return the rows from the function before appending them to the DOM, you can record them in an object or array. Then you can easily remove them with removeChild (previously mentioned) without searching the document again.

Categories

Resources