Find Last Td Without Using Jquery
I need to find the Last td of every row in a HTML table, and remove a css from that td. Can I do it without using Jquery. How?
Solution 1:
You can use css3 last-child
property for this. Write like this:
trtd:last-child{
color:red;
}
But it's not work in IE8 & below.
Solution 2:
Use CSS
td:last-child: {
//your style here
}
or using traverse the DOM using JavaScript :
var mytable = document.getElementById('tableid');
var myrows = mytable.getElementsByTagName("tr");
var lastrow = myrows[myrows.length -1];
var mycells = lastrow.getElementsByTagName("td");
var lastcell = mycells[mycells.length -1];
// set CSS property here
lastcell.style.color = "red";
lastcell
is your last td
Solution 3:
Have you tried using CSS3 selectors? E.g
trtd:last-child
{
YOUR CODE HERE
}
You could also look at using classes to show which td's are the last. But of course this isnt dynamic.
I believe there is also a normal javascript answer but im not very good at that :P
Solution 4:
Assuming that you are not looking for css type solution
rows=document.getElementsByTagName('tr')
for (var i=0; i<rows.length; i++){
columns=rows[i].getElementsByTagName('td');
mytd = columns[columns.length-1];
classname = mytd.className;
arr = classname.split(' ');
mytd.className = arr.filter(function(e){return e!=CLASSTOREMOVE}).join(' ');
}
Solution 5:
For a pure JavaScript solution:
functionremoveCssClass(tableId, cssClass) {
var trs = null;
var tr = null;
var tds = null;
var td = null;
var classes = [];
var i = 0;
trs = document.getElementById(tableId).getElementsByTagName('tr');
tds = trs[trs.length - 1].getElementsByTagName('td');
td = tds[tds.length - 1];
classes = td.className.split(' ');
for (i = 0; i < classes.length; i += 1) {
if (classes[i] === cssClass) {
classes.pop(i);
}
}
td.className = classes.join(' ');
returnfalse;
}
Working fiddle.
Post a Comment for "Find Last Td Without Using Jquery"