CODEWITHSUNDEEP
javascriptdom
LandY
LandY

Reputation: 123

Get last row of table attribute

var table = document.getElementById(table1);
var lastRow = table.rows.length;

var country = lastRow.getElementById('Country');
country.setAttribute('class', "Country"+lastRow);

Im pretty new and I was wondering if this is possible?

Instead of 

var Country= document.getElementById('Country');

As I have other id=Country because I am adding new rows..

EDIT

I know ID are unique. But I am cloning the last row so of course the IDs will all be the same.

Upvotes: 11

Views: 57897

Answers (4)

aliouneOnePoint
aliouneOnePoint

Reputation: 41

I think the best way to do this is :

var lastTr = document.getElementById('tabRecapCommande').lastElementChild.lastElementChild;

with document.getElementById('tabRecapCommande') returning the <table> document.getElementById('tabRecapCommande').lastElementChild. returning the <tbody> document.getElementById('tabRecapCommande').lastElementChild.lastElementChild the last <tr> of the <tbody>

if you console.log(lasTr) you will see your last <tr> element :)

Upvotes: 4

user17753
user17753

Reputation: 3161

Here is how to implicitly get the last cell. Note that you can reference a particular object in the rows or cells array using the square bracket notation, and that due to arrays indexing starting at 0 you must subtract 1 from the length to use it as a valid last index.

This example show cases some of the things you can do:

<!DOCTYPE html>
<html>

<head>
<title>Table test</title>

<script language="javascript" type="text/javascript">

function init() {

var table = document.getElementById("table1");

var lastRowIndex = table.rows.length-1;

var lastCellIndex = table.rows[lastRowIndex].cells.length-1;

alert( table.rows[lastRowIndex].cells[lastCellIndex].innerHTML ); // alerts the cell's containing HTML, or 9

var lastCell = table.rows[lastRowIndex].cells[lastCellIndex]; // contains a reference to the last cell

}



window.onload = init;
</script>

</head>

<body>


<table id="table1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>


</body>

</html>

Suppose you had an arbitrary table with 8 columns and 4 rows as in the following example, and wanted cell in column 5 and row 3 to get that cell you'd want to grab a reference to the table (such as through getElementById) and then select for the right row and column through rows and cells making sure to subtract 1 due to arrays indexing starting at 0. See this example:

<!DOCTYPE html>
<html>

<head>
<title>Table test</title>

<script language="javascript" type="text/javascript">

function init() {

var table = document.getElementById("table1");

var column5Row3 = table.rows[2].cells[4]; // contains a reference to the cell that is in the 3rd row, and 5th column

alert( column5Row3.innerHTML ); // alerts that cell's innerHTML (or Y)

}



window.onload = init;
</script>

</head>

<body>


<table id="table1">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><td>2</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>3</td><td>x</td><td>x</td><td>x</td><td>Y</td><td>x</td><td>x</td><td>x</td></tr>
<tr><td>4</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td><td>x</td></tr>
</table>


</body>

</html>

Upvotes: 5

mwcz
mwcz

Reputation: 9301

The last row of a table can be accessed from the rows property.

var lastRow = table.rows[ table.rows.length - 1 ];

However I think there is some confusion as to what exactly you're asking for.

Upvotes: 20

JaredPar
JaredPar

Reputation: 754763

An ID in an HTML document is unique. Hence there is no need to do sub-queries in order to find elements. Instead always use document.getElementById('Country')

Upvotes: 1

Related Questions